CODEWITHSUNDEEP
htmlvalidationvalidity.js
WhiteShadow
WhiteShadow

Reputation: 323

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?

Upvotes: 2

Views: 103

Answers (2)

Jere
Jere

Reputation: 1266

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.

Upvotes: 3

WhiteShadow
WhiteShadow

Reputation: 323

Form must be submitted before validation kicks in.

So you have to add a button with the type of submit so like so:

<input type="submit" value="blah">

And then you have to enclose all the fields/inputs in a <form> and </form> tag.

here is the working code:

<form> 
    <input id="foo" type="number" max="2" value="1" />
    <input id="bar" type="number" max="2" value="3" />
    <input type="submit" value="blah">
</form>

<script>
    document.getElementById('foo').validity.rangeOverflow; //false
    document.getElementById('bar').validity.rangeOverflow; //true
</script>

Upvotes: 0

Related Questions