How can I enable/disable unobtrusive validation on show/hide via jquery?

Question

Update: What I'm asking is whether it's possible to remove validation rules which are inferred from Attributes on fields in my viewmodel, on the client side ONLY.

--

I am toggling the display of certain fields when a choice is made from a dropdown list. I need to also toggle the validation.

ViewModel.cs:

public int ddlTypeID { get; set; }
public Dictionary<int, string> ddlTypes { get; set; }

[Required(ErrorMessageResourceName = "msgRequired",
    ErrorMessageResourceType = typeof(Resources.Globals))]
public DateTime firstDate {get; set;}

[Required(ErrorMessageResourceName = "msgRequired",
    ErrorMessageResourceType = typeof(Resources.Globals))]
public DateTime otherDate {get; set;}

Create.cshtml:

<script type="text/javascript">
    $(document).ready(function () {
       $('.optional').hide();
       $('#ddlTypeID').change(function () {
            var id = $(this).val();
            if (id == 1) {
                $('.optional').show();
            } else {
                $('.optional').hide();
            }
        });
    });
</script>

@using (Html.BeginForm())
{
    <div class="editor-field">
        @Html.DropDownListFor(x=>x.ddlTypeID, new SelectList(Model.ddlTypes,"Key","Value",Model.ddlTypeID),Resources.Globals.msgType)
        @Html.ValidationMessageFor(model => model.ddlTypeID)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.firstDate )
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.firstDate )
        @Html.ValidationMessageFor(model => model.firstDate )
    </div>

    <div class="editor-label optional">
        @Html.LabelFor(model => model.otherDate )
    </div>
    <div class="editor-field optional">
        @Html.EditorFor(model => model.otherDate )
        @Html.ValidationMessageFor(model => model.otherDate )
    </div>

    <input type="submit" value="Save" />
}

This works to hide/show the fields for otherDate - but how can I toggle the validation at the same time? Or is there a better way to do this?

Answer 1

It Works true. But you need to call this code when you have hidden elements on form. right code is :

function IgnoreValidationForHiddenElements() {

  $.validator = $("#formid").validate(
               {
                   ignore: ":hidden"
               });
}

or when you put on

$(document).ready(function () {
//Your Code
}

when you need this option when form Load.

Answer 2

I have this specific requirement and found that .Net MVC creates the "data-val" attribute on the control being validated. Give the control you want to toggle validation an id first:

<div class="editor-field optional">
    @Html.EditorFor(model => model.otherDate, new { @id = "ctlToToggle" )
    @Html.ValidationMessageFor(model => model.otherDate )
</div>

Then change the "data-val" attribute on the control to true when visible and false when hidden:

<script type="text/javascript">
   $(document).ready(function () {
       $('.optional').hide();
       $('#ctlToToggle').attr("data-val", "false"); // Turn off validation on page load
       $('#ddlTypeID').change(function () {
           var id = $(this).val(),
               ctlToToggle = $('#ctlToToggle'); 
           if (id == 1) {
               $('.optional').show();
               ctlToToggle.attr("data-val", "true") // Turn on validation when visible
           } else {
               $('.optional').hide();
               ctlToToggle.attr("data-val", "false"); // Turn off validation when hidden
           }
       });
   });
</script>