Is there a way, in an ASP MVC project using unobtrusive validation, to dynamically remove the Required attribute from an element?

The element is decorated with a Required annotation in the view model. I thought I could remove this by removing the html attribute, "data-val-required," with JQuery but client validation still treats the element as required. Is it impossible to manipulate the element's validation by manipulating the unobtrusive validation attributes?

This is what I tried, but it didn't work. I wanted to remove the required attribute if a check box was unchecked.

$("#chkTempHire").click(function () {

    var checked = $(this).attr("checked");
    var attr = $("#txtTempHireEndDate").attr("data-val-required");
    var hasAttr = false;

    if (typeof attr !== typeof undefined && attr !== false)
        hasAttr = true;

    if (!checked && hasAttr)
        $("#txtTempHireEndDate").removeAttr("data-val-required");
});

Am I missing something, or is it just not possible?

Thank you!

Is there a way, in an ASP MVC project using unobtrusive validation, to dynamically remove the Required attribute from an element?

The element is decorated with a Required annotation in the view model. I thought I could remove this by removing the html attribute, "data-val-required," with JQuery but client validation still treats the element as required. Is it impossible to manipulate the element's validation by manipulating the unobtrusive validation attributes?

This is what I tried, but it didn't work. I wanted to remove the required attribute if a check box was unchecked.

$("#chkTempHire").click(function () {

    var checked = $(this).attr("checked");
    var attr = $("#txtTempHireEndDate").attr("data-val-required");
    var hasAttr = false;

    if (typeof attr !== typeof undefined && attr !== false)
        hasAttr = true;

    if (!checked && hasAttr)
        $("#txtTempHireEndDate").removeAttr("data-val-required");
});

Am I missing something, or is it just not possible?

Thank you!

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

• 3 One solution is to use MVC's Foolproof Validation, which allows you to use attributes such as RequiredIf. – Icemanind Commented Jul 16, 2015 at 23:12
• 2 Conditional validation is what you're looking for, for example: stackoverflow.com/questions/17970584/… – Nico Commented Jul 16, 2015 at 23:22
• Thanks, I am using FluentValidation and it works for me. I've just been trying to learn more about how the unobtrusive validation works. – Mike Commented Jul 17, 2015 at 17:43

4 Answers 4

You can use the .rules() method built into jQuery, you don't need to manually remove attributes.

To remove:

$("#txtTempHireEndDate").rules("remove", "required")

To add:

$("#txtTempHireEndDate").rules("add", "required")

you can use rules function in jquery.validate

$("..").rules("add",....)
$("..").rules("remove",...)

http://jqueryvalidation.org/rules

You must revalidate the form.

Just call the validate function from form, like this:

$('#FormId').valid();

You can also validate the control you've removed the attribute:

$('#txtTempHireEndDate').valid();

$("#dailyFlow").removeAttr('data-val-required');