Как я могу включить / отключить ненавязчивую проверку при показе / скрытии через jquery?

Question

Обновление: я спрашиваю, возможно ли удалить правила проверки, выведенные из Атрибутов в полях моей модели представления, ТОЛЬКО на стороне клиента.

-

IЯ переключаю отображение определенных полей, когда выбор сделан из выпадающего списка.Мне нужно также включить проверку.

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

У меня есть это конкретное требование, и я обнаружил, что .Net MVC создает атрибут «data-val» для проверяемого элемента управления. Дайте элемент управления, который вы хотите переключить валидацию идентификатор сначала:

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

Работает верно. Но вам нужно вызывать этот код, когда у вас есть скрытые элементы в форме. правильный код:

function IgnoreValidationForHiddenElements() {

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

или когда вы надеваете

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

когда вам нужна эта опция при загрузке формы.

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, который полностью обрабатывает проверку формы на стороне клиента.)

edit: удален фрагмент круглой скобки, который в ретроспективеОП явно уже знал.Мои извинения.