Search code examples
htmlvalidationvalidity.js

HTML5 Validation Not Trigering

I'm working on making client side validation for inputs. I had had been using PHP to do it all. Needless to say things got cluttered very quickly. So I looked in to JS and HTML5 and want to move in to that system for validation.

The messages I want to show are like this:

Email Popup Message

I know that these are done with the the <input type="email"> tag.

After some help, I was pointed to this page html5rocks.

However I cant seem to get anything to popup. I copied code straight from there site and nothing.

<input id="foo" type="number" max="2" value="1" />
<input id="bar" type="number" max="2" value="3" />
    <script>
        document.getElementById('foo').validity.rangeOverflow; //false
        document.getElementById('bar').validity.rangeOverflow; //true
    </script>

What am I missing to make the notification appear?

Solution

  • That popup is a new implementation in HTML5. Just create an input field like this:

    <input type="email">

    The popup appears automatically when the form is submitted if the input isn't an email-address.

    More about the new input fields in HTML5 is at W3Schools.