ansaurus

Question

Do any browsers yet support HTML5's checkValidity() method?

Answer 1

+2 A:

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.

David Thomas 2010-03-10 22:47:03

Answer 2

+1 A:

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().

Adam 2010-03-10 22:52:34

Answer 3

+3 A:

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.

Arne Roomann-Kurrik 2010-03-10 23:12:50

You need to call checkValidity on the form, not the inputs.

miketaylr 2010-03-11 01:25:26

Where do you see that? http://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.

Arne Roomann-Kurrik 2010-03-11 07:02:51

My understanding was that calling `checkValidity()` on the form would simply delegate to each of its `input`s (and `select`s and `textarea`s) in turn, but I can't say I actually have a reference for that.

James A. Rosen 2010-03-11 14:11:04

That certainly sounds reasonable, but it should also work on inputs as well

Arne Roomann-Kurrik 2010-03-11 19:12:21

Answer 4

+1 A:

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/

miketaylr 2010-03-11 01:19:46

Answer 5

+1 A:

THANK YOU for having this discussion! I just spent > 8 hours trying to determine why my Javascript function named checkValidity() was being totally ignored by Chrome! I had no idea it was a reserved function in HTML 5. Hopefully anyone else out there tweaking sites for Chrome/HTML 5 will find this thread before wasting as much time as I did!

Bill Carey 2010-05-27 15:58:46

ansaurus

tags:

views:

answers:

Do any browsers yet support HTML5's checkValidity() method?

related questions