如何通过jquery在show / hide上启用/禁用不显眼的验证？

Question

更新：我要问的是，是否可以删除在我的viewmodel中的字段上的属性推断出的验证规则，仅在客户端。

-

当从下拉列表中进行选择时，我正在切换某些字段的显示。 我还需要切换验证。

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" />
}

这可以隐藏/显示otherDate的字段 - 但是如何同时切换验证？ 或者有更好的方法吗？

Answer 1

它的确有效。 但是，当您在表单上隐藏元素时，需要调用此代码。 正确的代码是：

function IgnoreValidationForHiddenElements() {

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

或者当你穿上

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

表单加载时需要此选项时。

Answer 2

我有这个特定的要求，发现.Net MVC在被验证的控件上创建“data-val”属性。 首先为您想要的控件切换验证ID：

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

然后将控件上的“data-val”属性更改为true（隐藏时）和false（隐藏时）：

<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>

Answer 3

如果在输入元素上放置一个“id”（或使用MVC生成的ID），则可以使用.rules()函数删除现有规则并保存它们以便以后恢复：

<script type="text/javascript">
  var savedRules;

  $(document).ready(function () {
    $('.optional').hide();
    $('#ddlTypeID').change(function () {
      var id = $(this).val();
      if (id == 1) {
        $('.optional').show();
        $('#otherDate').rules("add", savedRules); // Restore saved rules
      } 
      else {
        $('.optional').hide();
        $('#otherDate').rules("remove", savedRules); // Remove the rules so they don't trigger
      }
    });
  });
</script>

@Html.EditorFor(model => model.otherDate, new { id = 'otherDate' } )

Answer 4

如果你要求，jquery验证实际上会自动执行此操作

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

我个人觉得JQuery验证比MVC验证更容易使用，但它确实涉及学习如何使用JQuery验证，如果你还没有这样做。

（JQuery validate是一个JQuery插件，完全在客户端处理表单验证。）

编辑：删除了一些括号，回想起来，OP显然已经知道了。 我很抱歉。