HTML5 / JS Constraint validation Bug

Question

I'm trying to validate a form using the Constraint Validation API to customize error messages.

According to mozilla (https://developer.mozilla.org/en-US/docs/HTML/Forms/Data_form_validation) everything should work, but I have a strange bug when I try to validate a simple mail input, invalid mail is not detected.

Here a sample of my code :

<input type="mail" id="mail" name="mail"/>

then the object is stored in JS, and I check in console with :

console.log(field.get(0).validity);

The answer from the console is :

customError : false
patternMismatch : false
rangeOverflow : false
rangeUnderflow : false  
stepMismatch : false    
tooLong : false 
typeMismatch : false
valid : false   
valueMissing : true

So I assume the function call is working.

If I leave the input empty, same answer. If I put "a" or random string, same answer. If I put a valid mail, same answer...

If I put a required attribute, emptyness is detected...

Do you know what's happening ?

Is the API too young to be used, or I missed something ?

What can I use as alternative ?

Thanks for reading, and sorry for my english.

It would be quite useful to specify which browser you're using. — MMM
– MMM, Commented May 7, 2013 at 15:31

MMM · Accepted Answer · 2013-05-07 15:32:53Z

1

You should be using type email.

Have a look at the link you've posted.

Example:

<form>
  <label for="mail">I would like you to provide me an e-mail</label>
  <input type="email" id="mail" name="mail">
  <button>Submit</button>
</form>

Type mail will be unrecognised. Simple as that.

answered May 7, 2013 at 15:32

MMM

7,3402 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FLX Over a year ago

O_o ... sure... Thanks a lot. I lost 3hours of work for a "e". SHIT.

Collectives™ on Stack Overflow

HTML5 / JS Constraint validation Bug

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related