Email validation when it is blank

Question

1. HTML5 can validate email form by itself (doesn't need JS). How is about if a user forgets to enter email and hit submit button, how can HTML5 validate a blank field?

   <form> <input type="email" placeholder="Enter your email"> <input type="submit" value="Submit"> </form>

2. A message alert when a user enters a wrong email format is different from IE, FireFox. In IE, it says: "You must enter an email address in this format:...... " I am trying to edit this message so that it will show the same message in any browser, but I am not successful, yet. Please give me a hand.

Answer 1

Add the required attribute

<input type="email" placeholder="Enter your email" required>

In response to your second question, you can set the title attribute which will append text to the default error message. In order to completely customize the error messages you need to write some JavaScript. You want to listen for "invalid" events, and use setCustomValidity to set the message

input.addEventListener('invalid', function(e) {
    if (input.validity.valueMissing) {
        e.target.setCustomValidity("PLZ CREATE A USERNAME, YO!");
    } else if(!input.validity.valid) { 
        e.target.setCustomValidity("U R DOIN IT WRONG!");
    }
}, false);

See: http://developer.nokia.com/Blogs/Code/2012/11/21/creating-a-custom-html5-form-validation/

and for custom required messages

HTML5 form required attribute. Set custom validation message?