Unobtrusive validation adapter stopped working after reparse validator

Question

I try to make form wizard with javascript but I have problem with unobtrusive validation of checkbox. In page head I have included unobtrusive validation script file and after that I have added this code: jQuery.validator.unobtrusive.adapters.addBool("brequired", "required"); If I submit whole form, it works. But as I said I want to make wizard. So I added this script file in body after the form with this content(I strip hiding of steps):

var $jq = jQuery.noConflict();

if ($jq(document).ready()) {
    //remove data-val attribute from all field in form
    $jq('#form-wizard > div[id^=form-step] *')
        .filter("input,select").removeAttr("data-val");
}

function validate(form, currentStep) {
    //add data-val attribute to the field which I want validate in this step
    form.find("#form-step-" + currentStep + " *")
        .filter("input, select").attr("data-val", "true");

    //without this, parse() function will not update validator 
    //regardless any changes in form (added data-val="true" attribute)
    form.removeData("validator").removeData("unobtrusiveValidation");

    //I try add adapter again before parse but it don't work
    //$jq.validator.unobtrusive.adapters.addBool("brequired", "required");
    $jq.validator.unobtrusive.parse(form);

    if (!form.valid()) {
        form.children("#form-step-" + currentStep + " *")
            .filter("input, select").removeAttr("data-val");
        return false;
    }

    form.children("#form-step-" + currentStep + " *")
        .filter("input, select").removeAttr("data-val");

    //reset jQuery Validate's internals
    form.validate().resetForm();

    //reset unobtrusive validation summary, if it exists
    form.find("[data-valmsg-summary=true]")
        .removeClass("validation-summary-errors")
        .addClass("validation-summary-valid")
        .find("ul").empty();

    //reset unobtrusive field level, if it exists
    form.find("[data-valmsg-replace]")
        .removeClass("field-validation-error")
        .addClass("field-validation-valid")
        .empty();

    return true;
}

this validate() function is called after click to next button. But with this script included to page it seams like the adapter don't work. Chcekbox isn't validated. I checked that before parse all required fields including checkbox have data-val="true" set.

EDIT: My form have this structure:

<form id="form-wizard">
    <div id="form-step-1">
        <input>
          ...
        <input>
    </div>
    <div id="form-step-2">
        <input>
          ...
        <input>
    </div>
</form>

I realy don't know what I am missing.

Answer 1

OK I make it more complicated as it realy is. All I need to do is hide (display:none) div which I don't want to validate. I did know that it don't validate hidden fields but I was thinking that hidden must be directly input tag (or select tag). But it is enough to hide some adjecent tag. For example:

<div id="form-step-2" class="hidden">...some fieldset, input etc...</div>

Now it will not validate form-step-2 div.

Anyway I still don't know why my previous approach isn't working...

Answer 2

It seems like you have several forms, and you want validation to be switched on and off. You can manually enable and disable validation for each of the forms.

Here is the sample JavaScript code:

var $form = $("#my-step-1");

// disable validation
$form.removeData('validator');
$form.removeData('unobtrusiveValidation');

// enable validation
$.validator.unobtrusive.parse($form);

On document ready you can disable validation for all of the forms and manually enable for the first one. Then, for the second one, etc.