Custom error message for various HTML5 validation attributes

Question

Is there a way to provide custom messages(error messages) when a validation fails on an input control?

Eg:

<input type="number" value="" min="1" max="5">

Enter value 10 and then submit the form it shows "Please select a value which is no more than 5"

This can be done using javascript, but I am much interested in HTML5 way without third party library.

I am unable to find the attributes related to error message in HTML5 documentation.

Answer 1

You could check if they match a certain pattern and if so then make the submit button visible.

For more information see: http://www.the-art-of-web.com/html/html5-form-validation/

Example:

 input:required:invalid, input:focus:invalid { border: 1px solid red; } input:required:valid { border: 1px solid green; } input[type="submit"] { display: none; } input:required:valid ~ input[type="submit"] { display: block; } 

 <b>Website:</b> <input type="url" name="website" required pattern="https?://.+"> <input type="submit"><br/> <i>Submit is only visible when you fill in a website starting with: http(s)://</i>