olton / Metro-UI-CSS

Impressive component library for expressive web development! Build responsive projects on the web with the first front-end component library in Metro Style. And now there are even more opportunities every day!
http://metroui.org.ua/
MIT License
7k stars 1.97k forks source link

Form validator : data-validate="date" issue #1027

Closed Falconpage closed 6 years ago

Falconpage commented 6 years ago

Hello,

I've got a problem with form validator when I'm using data-validate="date"

-> validator failed to check the data-format I set. It check using the "us" one.

My input field :

<input type="text" value="" data-role="calendarpicker" data-locale="fr-FR" data-format="%d/%m/%Y" data-validate="date" data-header-format="%A %e %B"/>

I'm using this local :

Metro.utils.addLocale({ 'fr-FR': { "calendar": { "months": [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre", "Jan", "Fev", "Mar", "Avr", "Mai", "Juin", "Jui", "Aou", "Sep", "Oct", "Nov", "Dec" ], "days": [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa", "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ], "time": { "days": "JOURS", "hours": "HEURES", "minutes": "MINS", "seconds": "SECS" } }, "buttons": { "ok": "OK", "cancel": "Cancel", "done": "Done", "today": "Today", "now": "Now", "clear": "Clear", "help": "Help", "yes": "Yes", "no": "No", "random": "Random" } } });

olton commented 6 years ago

The validator return false if value can not be converted to date with js date parser. You use formating for date value. To check it, use rule required

olton commented 6 years ago

The picker will not allow you to specify an unavailable date and you will have to check for a mandatory value with required rule

Falconpage commented 6 years ago

Thanks, I have modified this input to allow me specify a value manually using your picker : onclick -> removeAttr('readonly') This is why I would like to validate this input. Sorry I don't understand "requared", do you mean regular expression ?

olton commented 6 years ago

Use data-validate="required"

Falconpage commented 6 years ago

Ok, done. For the input where I allow modification I'm using this expression that allow check the french format. If it help someone : dd/mm/yyyy

data-validate='pattern=^(((((0[1-9])|(1\d)|(2[0-8]))\/((0[1-9])|(1[0-2])))|((31\/((0[13578])|(1[02])))|((29|30)\/((0[1,3-9])|(1[0-2])))))\/((20[0-9][0-9])|(19[0-9][0-9])))|((29\/02\/(19|20)(([02468][048])|([13579][26]))))$'