Login/Register
Do any browsers yet support HTML5's checkValidity() method?
Asked Answered
Solved javascriptvalidationhtmlbrowser
M

6

12

The HTML5 spec defines some very interesting validation components, including pattern (for validating against a Regexp) and required (for marking a field as required). As best I can tell, however, no browser yet actually does any validation based on these attributes.

I found a comparison of HTML5 support across engines, but there is no information about validation there. In the browsers I've tried (Firefox 3.5.8 and Safari 4.0.4), no object has a checkValidity() method, so I can't run the validations even though I can define them.

Is there any support for this feature out there so I can experiment?

Mohawk answered 10/3, 2010 at 22:42 Comment(0)
B
6

I tested the following in Google Chrome:

<!DOCTYPE html>
<html>
  <body>
    <style>
      .valid { color: #0d0; }
      .invalid { color: #d00; }
    </style>
    <div id="output"></div>
    <script>
      function check(input) {
        var out = document.getElementById('output');
        if (input.validity) {
          if (input.validity.valid === true) {
            out.innerHTML = "<span class='valid'>" + input.id +
                            " is valid</span>";
          } else {
            out.innerHTML = "<span class='invalid'>" + input.id +
                            " is not valid</span>";
          }
        }
        console.log(input.checkValidity());
      };
    </script>
    <form id="testform" onsubmit="return false;">
      <label>Required:
        <input oninput="check(this)" id="required_input" 
               required />
      </label><br>
      <label>Pattern ([0-9][A-Z]{3}):
        <input oninput="check(this)" id="pattern_input" 
               pattern="[0-9][A-Z]{3}"/>
      </label><br>
      <label>Min (4):
        <input oninput="check(this)" id="min_input" 
               type=number min=4 />
      </label><br>
    </form>
  </body>
</html>

Stangely, the <element>.validity.valid property seems to work correctly, but calling <element>.checkValidity() always returns true, so it looks like that's not implemented yet.

Blacktop answered 10/3, 2010 at 23:12 Comment(6)
You need to call checkValidity on the form, not the inputs. – Corella
Where do you see that? dev.w3.org/html5/spec/Overview.html says checkValidity is a member function on HTMLObjectElement and: "When the checkValidity() method is invoked, if the element is a candidate for constraint validation... the user agent must fire a simple event named invalid that is cancelable ... at the element and return false. " The same spec defines "candidate for constraint validation" as "A listed form-associated element is a candidate for constraint validation except when a condition has barred the element from constraint validation." Seems that inputs apply. – Blacktop
My understanding was that calling checkValidity() on the form would simply delegate to each of its inputs (and selects and textareas) in turn, but I can't say I actually have a reference for that. – Mohawk
That certainly sounds reasonable, but it should also work on inputs as well – Blacktop
Calling checkValidity just causes an event to fire, to check the actual validity you have to handle the invalid event on the element – Scottiescottish
Chrome supports checkValidity() now. – Winther
C
8

Sure. Opera and Chromium. But you can test yourself:

function supportsValidity(){
  var i = document.createElement('input');
  return typeof i.validity === 'object'
}

Here's a link to a sandbox where you can see Opera and Chrome in action: http://jsfiddle.net/vaZDn/light/

Corella answered 11/3, 2010 at 1:19 Comment(0)
B
6

I tested the following in Google Chrome:

<!DOCTYPE html>
<html>
  <body>
    <style>
      .valid { color: #0d0; }
      .invalid { color: #d00; }
    </style>
    <div id="output"></div>
    <script>
      function check(input) {
        var out = document.getElementById('output');
        if (input.validity) {
          if (input.validity.valid === true) {
            out.innerHTML = "<span class='valid'>" + input.id +
                            " is valid</span>";
          } else {
            out.innerHTML = "<span class='invalid'>" + input.id +
                            " is not valid</span>";
          }
        }
        console.log(input.checkValidity());
      };
    </script>
    <form id="testform" onsubmit="return false;">
      <label>Required:
        <input oninput="check(this)" id="required_input" 
               required />
      </label><br>
      <label>Pattern ([0-9][A-Z]{3}):
        <input oninput="check(this)" id="pattern_input" 
               pattern="[0-9][A-Z]{3}"/>
      </label><br>
      <label>Min (4):
        <input oninput="check(this)" id="min_input" 
               type=number min=4 />
      </label><br>
    </form>
  </body>
</html>

Stangely, the <element>.validity.valid property seems to work correctly, but calling <element>.checkValidity() always returns true, so it looks like that's not implemented yet.

Blacktop answered 10/3, 2010 at 23:12 Comment(6)
You need to call checkValidity on the form, not the inputs. – Corella
Where do you see that? dev.w3.org/html5/spec/Overview.html says checkValidity is a member function on HTMLObjectElement and: "When the checkValidity() method is invoked, if the element is a candidate for constraint validation... the user agent must fire a simple event named invalid that is cancelable ... at the element and return false. " The same spec defines "candidate for constraint validation" as "A listed form-associated element is a candidate for constraint validation except when a condition has barred the element from constraint validation." Seems that inputs apply. – Blacktop
My understanding was that calling checkValidity() on the form would simply delegate to each of its inputs (and selects and textareas) in turn, but I can't say I actually have a reference for that. – Mohawk
That certainly sounds reasonable, but it should also work on inputs as well – Blacktop
Calling checkValidity just causes an event to fire, to check the actual validity you have to handle the invalid event on the element – Scottiescottish
Chrome supports checkValidity() now. – Winther
A
4

checkValidity() is suppost to work on either the form as a whole or an individual input.

"Additionally, the checkValidity() method can be executed on either an individual field or the form as a whole, and returns true or false. Executing the method will also programmatically fire the invalid event for all invalid fields, or, if executed on a single field, only for that element."

taken from a List Apart - http://www.alistapart.com/articles/forward-thinking-form-validation/

"form . checkValidity() Returns true if the form's controls are all valid; otherwise, returns false." http://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#constraint-validation

"valid = element . checkValidity() Returns true if the element's value has no validity problems; false otherwise. Fires an invalid event at the element in the latter case." http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#client-side-form-validation


W3C - working draft.

Annatto answered 12/10, 2012 at 15:22 Comment(0)
V
3

According to Dive into HTML5:

When an Opera user tries to submit a form with an field, Opera automatically offers RFC-compliant email validation, even if scripting is disabled. Opera also offers validation of web addresses entered into fields, and numbers in fields. The validation of numbers even takes into account the min and max attributes, so Opera will not let you submit the form if you enter a number that is too large.

(The quoted paragraph is about the last in the article.)

So far as I'm aware -and bearing in mind I've not tested with Opera 10, I'm taking their word for it- no other browser yet validates forms automatically.

Vestibule answered 10/3, 2010 at 22:47 Comment(0)
L
1

Opera 10 has some HTML5 form validation http://dev.opera.com/articles/view/improve-your-forms-using-html5/. But, I don't think it has checkValidation().

Lymphoma answered 10/3, 2010 at 22:52 Comment(0)
W
1

If you mean checkValidity() then, yes, Opera supports it.

Disclosurey thang: I work for Opera.

Wastebasket answered 23/11, 2011 at 14:57 Comment(1)
Since you work there... any chance you could shed some light on the comment thread above... whether or not it's supposed to work on the parent form? #2421718 – Coraleecoralie

© 2022 - 2024 — McMap. All rights reserved.