1

I'm trying to make a step-by-step form on one page where a user needs to click the "next" button to show the next step.

So here's the question: Is there a jQuery function (or just JS) which checks if a form has some HTML5 errors "by now"? So the next step won't show if there are any errors in that certain step?

user2394156
  • 1,792
  • 4
  • 16
  • 33
  • somthing like [this](http://stackoverflow.com/questions/2421218/do-any-browsers-yet-support-html5s-checkvalidity-method) maybe? – Ahmed Ali Jun 23 '13 at 08:23
  • Alright, but is there any jQuery support for this? (I'm trying to stick to the framework to avoid code mixing) – user2394156 Jun 23 '13 at 08:30
  • then maybe [this](http://jquery.bassistance.de/validate/demo/) ? – Ahmed Ali Jun 23 '13 at 08:40
  • As far as I can see it won't work because it validates the whole form and I want to validate a few elements in the form. Maybe it has such an option but I can't see it? Or is there a plugin which allows validation of certain form elements? – user2394156 Jun 23 '13 at 08:57
  • Sorry I'm blind. I can validate single inputs with this but I was hoping for some group validation. Thanks anyway – user2394156 Jun 23 '13 at 09:06

1 Answers1

1

Just use .prop() to check validity:

if ($(selector).prop('validity').valid) {
    // do stuff
}

Working demo: http://jsfiddle.net/jhn9Z/

This can also be used for group validation, and while I'm sure that there are other ways to go about this, an easy way is to see if the number (quantity?, length?) of all fields matches the number of all valid fields.

Working demo: http://jsfiddle.net/jhn9Z/1/

This works because fields are automatically valid if there's no required (or pattern, etc.) attribute set.

pete
  • 24,141
  • 4
  • 37
  • 51