Menu icon Foundation
Input type="tel" with required never validate

Last version F6
When I'm trying to use this input type="tel" with "required" regardless the pattern, the input never validate and always show the error message.
Did I missed something ?

<input type="tel" placeholder="+33 6 00 00 00 00" required pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" />
<span class="form-error">
We need your phone number to communicate.
</span>

inputtypetextabidefoundation6

Last version F6
When I'm trying to use this input type="tel" with "required" regardless the pattern, the input never validate and always show the error message.
Did I missed something ?

<input type="tel" placeholder="+33 6 00 00 00 00" required pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" />
<span class="form-error">
We need your phone number to communicate.
</span>
Brian Tan over 3 years ago

Type tel may cause some mobile browser to present telephone-style keyboard. If it does not suit you, just use type text.

For validation, you have to define the pattern as follows and use in input as pattern="fr_tel"

$(document).foundation();
Foundation.Abide.defaults.patterns['fr_tel'] = /^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/;

Sven CAILTEUX over 3 years ago

Ok but now it's the same thing with date or time !
my html :

<input type="date" name="dateofdeparture" required  />

Using french language :
On chrome or mobile(iphone/safari) I can choose a date by choosing it for example today give me :

http://dimension-internet.com/zurbsupport/date.png

http://dimension-internet.com/zurbsupport/time.png

 16 févr. 2016
17:37

but I got an error like if I didn't choose anything (probably because the date/time format is in french dd/mm/YY hh:mm), do I have to override 'abide' by using my own validation ?

Brian Tan over 3 years ago

You have the field as required and if nothing is chosen, you'd get validation error. Different browsers/os may present different date or time input widgets and output formats. You can always use custom "fr-date", "fr-time" validations to validate expected output formats.