Geek Answers Handbook

Are there any JavaScript properties related to validating a web browser form in HTML5?

In HTML5, client-side validation should be the job of a web browser using attributes such as patternor required.

Is there only a CSS implementation of this (i.e. selectors :validand :invalid, to give feedback to the user) or is there also a JavaScript implementation?

I’m thinking of something like a function that allows you to call a JavaScript function if the user clicks the submit button and the form has invalid values. Or a flag that I can get in the form object to show if it has errors or not.

Thank.

+5
source share
2 answers

Yes, there is an attribute validitythat you can request. See http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#dom-cva-validity

I have no idea what support for this currently exists in browsers.

+6
source

Yes, it is, and it is currently working. See A List Apart for an excellent article on Ryan Seddon. According to the article, Chrome 4+, Safari 5+ and Opera 9.6+ support all the features. (It also includes an example .)

Quote from the article, you can do things like:

input:focus:required:invalid {
  background: pink url(ico_validation.png) 379px 3px no-repeat;
}
input:required:valid {
  background-color: #fff;
  background-position: 379px -61px;
}

And when the input checks, one icon will be displayed, and when it is invalid and focused, it will display another.

+6
source

More articles:


All Articles