Validate only visible fields with jQuery classes

I'm validating a form using jQuery validation.

For that I only add an specific class to the fields ("required","email",etc..).

Ex: <input id="form_linom" class="required" type="开发者_Python百科text" value="" name="form_linom" size="50">

Since is a big and dynamic form (selections in some fields hide or show other fields) I have problems when submitting the form since validator doesn't permit send the data to the server because is validating also the hidden fields.

The way I add the class to each field is making an array in PHP of all the required fields and then if the field is in that array the class is added.

Please read the question before answer. I'm uncomfortable with those no related and 'easy' answers that only criticize the question. I posted all the code I use to validate. The only other thing that I put was this in the header:

$("#form_proyecto").validate();

I posted code in http://jsfiddle.net/yW73h/, look that the email field is hidden but prevent the form to be sent. I need a general rule that collect all the required fields that are hidden, not only the e-mail field as in the example (In my real form I have 54 fields).

This is simple and you should read up on jquery's documantation on their website. this would fall under selectors. The selectors you need to use are

//1. attribute=value
$('[attributeName=value]')
//2. has attribute
$('[attribute]')
//3. mulitple selotors
$('[attributeName], [attributeName=value]')
//4. visible
$('Sector:visible')

so an example to select would be

$('#formID input[minlength]:visible, #formID input[class=required]:visible');

I'm going to guess the selector is going to very long and slow. also knowing the selector i pointless because your using a plugin which needs a form. so if you want this feature you have to change the plugin...a lot!. so find a plug in that does this, write your own, or change your form. This is the rare downside to plugins. sometimes they just dont do what you need.

if you're using the plug in you can set onsubmit to false:

 $("form").validate({ 
     onsubmit: false, 
     errorPlacement: function (error, element) { },            
     showErrors: function(errorMap, errorList) {                         
        $.each(errorList, function() { 
            errorSummary += " * " + this.message + "\n"; 
        });        
        this.defaultShowErrors(); 
          }, 
     errorClass: "Alert" 
    });

Then you can added classes to the element that you want to trigger validation:

 $('.modalValidationGroup .causesValidation').click(function (evt) { 
        errorSummary = "You have the following errors: \n";            
        clearDataTable(); 
        setValidateRules(); 
        var $group = $(this).parents('.modalValidationGroup'); 
        var isValid = true; 
        $group.find(':input').each(function (i, item) { 
            if (!$(item).valid()) 
                isValid = false; 
        });

        if (!isValid) { 
            evt.preventDefault(); 
            alert(errorSummary); 
        } else { 
            //submit form            } 
 });

There's a specific jQuery selector for this sort of thing.

It's called ............ wait for it ............ :visible !

Where you should put the selector is hard to tell when there's no code posted!

EDIT: Again, the visible selector is probably the way to go, and it's hard to say exactly how to implement it, but if the validation is done according to classes added to the input elements, you could just remove those classes, and I'm using the opposite of visible in the example, like so:

$("form:hidden").removeClass();

This removes all classes on all form elements that are hidden, and as such they will not be validated.

If these will be visible again later, you will need to keep the classes and reapply them when visible, I'm thinking something like this:

$("form:hidden").toggleClass();

will toggle all classes. It really is that simple, although this will need some more work to be functional with your form of course, and you should probably write something to update elements that are becoming visible due to changes occurring in the form with the original classes again.

Fiddle: http://jsfiddle.net/yW73h/8/