How can I simulate a validation group with jquery validation plugin?

Question

I have a form with multiple fields that I'm validating. I have organized my controls into 2 fieldsets: MASTER and DETAIL.

Screenshot

I use the Save button to submits the form and the Add button to add a new item to my array of objects, where I store temporarily the data entered trough the DETAIL inputs that then I'll send to the server along with the data of the MASTER part.

The problem is that when I press the Add button and I still haven't filled in the MASTER inputs, I can't go on adding a new detail because of the Master validation. And similarly, when I attempt to submit the form and the DETAIL fields are empty the Detail validation fires.

My question is: Is it possible to simulate a validation group with jQuery validation plugin?

score 1 · Accepted Answer · answered Dec 04 '10 at 01:10

I've been googling and I've found that I can remove/add class (e.g, required, number); that gave me some ideas on how to simulate validation groups.

$(document).ready(function(){     
    $("#add").click(function() {
        $("#fecha").removeClass("required");
        $("#fecha").removeClass("date");
        $("#numeroDoc").removeClass("required");
        $("#numeroDoc").removeClass("number");
        $("#serieDoc").removeClass("required");
        $("#serieDoc").removeClass("number");

        $("#importe").addClass("required");
        $("#importe").addClass("number");
        $("#concepto").addClass("required");           
    });
    $("#save").click(function() {
        $("#importe").removeClass("required");
        $("#importe").removeClass("number");
        $("#concepto").removeClass("required");    

        $("#fecha").addClass("required");
        $("#fecha").addClass("date");
        $("#numeroDoc").addClass("required");
        $("#numeroDoc").addClass("number");
        $("#serieDoc").addClass("required");
        $("#serieDoc").addClass("number");  
    });
    $("#form1").validate({           
        errorPlacement: function(error, element) {
            error.appendTo( element.parent("td").next("td") );
        } ,
        submitHandler: function(form) {              

            $("#add").click(function() {
                addDetail();
                return false;

            });
            $("#save").click(function() {
                return false;

            });                      
        }
    });
});

Though, I've apparently found the answer, I'm not so sure about it due to some details:

1.When the page first loads, the numbers only validation (class="number") doesn't work till I press Add

2.If I make a mistake by entering the data then I have to press twice the button to fire the validation

I hope you can help me improve this code

How can I simulate a validation group with jquery validation plugin?

1 Answers1