Here's the use case:

I have this long form with group of field that only becomes visible if the user makes a certain selection in one of the visible inputs. Reading Brad Wilson's post on the subject I thought jQuery.validator.unobtrusive.parse('.extra-data') where .extra-data is a class of a hidden div. No luck as the data was already there when the first parse was done.

So at the end I came up with this to remove the rules:

$('.data-panel').find('input[type="text"], textarea, select').each(function (i, item) {
    var currentRules = $(item).rules('remove'); // Saving removed rules to a sorta dictionary
    if (!$.isEmptyObject(currentRules)) {
        removedRules[$(item).attr("name")] = currentRules;
    }
 });

and this to re-attach them:

$('.data-panel').find('input[type="text"], textarea, select').each(function (i, item) {
    if (!$.isEmptyObject(removedRules[$(item).attr('name')])) {
        $(item).rules('add', removedRules[$(item).attr('name')]);
    }
});

Problem is, it feels kinda hacky as I'm literally going through each field removing and re-attaching those validation rules. My question is: isn't there a more straightforward way? Performance is also an issue, in one of those huge forms you can feel the delay between the click and the validation run.

Here's the use case:

I have this long form with group of field that only becomes visible if the user makes a certain selection in one of the visible inputs. Reading Brad Wilson's post on the subject I thought jQuery.validator.unobtrusive.parse('.extra-data') where .extra-data is a class of a hidden div. No luck as the data was already there when the first parse was done.

So at the end I came up with this to remove the rules:

$('.data-panel').find('input[type="text"], textarea, select').each(function (i, item) {
    var currentRules = $(item).rules('remove'); // Saving removed rules to a sorta dictionary
    if (!$.isEmptyObject(currentRules)) {
        removedRules[$(item).attr("name")] = currentRules;
    }
 });

and this to re-attach them:

$('.data-panel').find('input[type="text"], textarea, select').each(function (i, item) {
    if (!$.isEmptyObject(removedRules[$(item).attr('name')])) {
        $(item).rules('add', removedRules[$(item).attr('name')]);
    }
});

Problem is, it feels kinda hacky as I'm literally going through each field removing and re-attaching those validation rules. My question is: isn't there a more straightforward way? Performance is also an issue, in one of those huge forms you can feel the delay between the click and the validation run.

• javascript
• jquery
• asp.net-mvc-3
• validation

• stackoverflow.com/questions/5104288/… – Jahan Zinedine Commented Oct 6, 2011 at 12:03

1 Answer 1

Do not remove and re-attach rules. Just disable or enable inputs. Disabled fields do not participate in validation, neither do they get submitted to server.

//disable inputs. No validation will occur on these
$('.data-panel').find('input[type="text"], textarea, select').attr('disabled', 'disabled');

//enable inputs. Validation is re-enabled
$('.data-panel').find('input[type="text"], textarea, select').removeAttr('disabled');