Processing only visible form fields for validation

Question

I need to validate a bunch of form fields within one element. I just need them all to be 'required', not necessarily input checked (email, phone number, etc). The problem is, I have the form dynamically showing and hiding inputs and select elements, and I need the validator to ignore hidden ones.

I have looked into this a fair amount - this, in theory, should work:

$('#theform').validate( {required: "input:visible,select:visible"}

It doesn't, the page just submits. There are several examples on this page, but I can't get any of them working. It's possible I'm implementing them wrongly.

Any help would be appreciated! Thanks for reading.

Answer 1

It's easier to use the ignore option here, like this:

$('#theform').validate({ ignore: ':hidden' });

I use this option to skip validation of dialogs that aren't presented for example, short and simple solution to the problem :)