Используя ненавязчивую проверку в ASP.NET MVC 3, как я могу предпринять действия, если форма неверна?

Question

У меня есть страница с вкладками пользовательского интерфейса jQuery и одно обязательное поле на первой вкладке. Проверка работает, и сообщение проверки появляется рядом с полем, если пользователь не ввел значение. Однако, если пользователь не на первой вкладке, это не очевидно, что поле является недействительным.

В этом случае я хотел бы показать первую вкладку, но я не уверен, как выполнить регистрацию обратного вызова для недопустимого события, если оно есть.

Я также рассмотрел возможность отображения сводки проверки над вкладками, которая будет отображаться независимо от вкладки, на которой находится пользователь, но я бы предпочел перенести пользователя в поле.

Я попытался просмотреть файл jquery.validate.unobtrusive.js, и он, кажется, расширяет jquery.validate.js. Глядя на документацию по jquery.validate, я вижу, что есть опция invalidHandler, которую можно передать методу validate , но я не знаю, как его использовать, так как этот метод вызывается автор jquery.validation.unobtrusive.

Я чувствую себя немного растерянным, поэтому любая помощь будет признательна!

Редактировать

Я так и не нашел ответ, но нашел способ, который я разместил ниже. Тем не менее, я надеюсь, что кто-то ответит с лучшим способом сделать это.

Answer 1

Этот код взят из здесь будет делать то, что вы хотите:

<script type="text/javascript">
    $(document).ready(function () {
        $("#myForm").submit(function () {
            $("#tabs").tabs("select", $("#myForm .input-validation-error").closest(".ui-tabs-panel").get(0).id);
        });
    });
</script>

Вы попадете на первую вкладку с ошибкой. Это отлично работает в проекте, который я разрабатываю ...

Answer 2

Я закончил проверку и отправку формы вручную:

$("#save-button").button().click(function() {
    if (!$("#profile-form").valid()) {
        if ($("#tabs").tabs("option", "selected") > 0) {
            $("#tabs").tabs("option", "selected", 0);
        }
        return false;
    }
    $("#profile-form").submit();
});

Answer 3

Попробуйте добавить новый адаптер в Unobtrusive.

Моя разметка выглядит иначе, потому что я использовал Telerik вместо JQuery UI для создания вкладок. Вот как выглядела моя разметка после прохождения через Validator (то есть с ошибками проверки, вставленными через ненавязчивый скрипт)

<div id="rItemTabs">

   <ul>
        <li><a href="#rItemTabs-1">Tab 1</a></li>
        <li><a href="#rItemTabs-2">Tab 2</a></li>
   </ul>
   <!-- End Tab Nav-->

   <!-- Begin Tab Contents -->
   <div id="rItemTabs-1">
       <div class="editor-label">
           <label for="Title">Title</label>
       </div>
       <div class="editor-field">
           <input id="Title" class="input-validation-error name="Title">
           <span class="field-validation-error">*</span>
       </div>
   </div> 

   <div id="rItemTabs-2">
       <div class="editor-label">
           <label for="Title">Title</label>
       </div>
       <div class="editor-field">
           <input id="Title" class="input-validation-error name="Title">
           <span class="field-validation-error">*</span>
       </div>
   </div>

</div> 

Цель этого сценария - просмотреть каждый элемент div в «Содержании вкладки», найти класс «field-validation-error» (который должен существовать только в случае ошибки) и если этот класс был найден, измените цвет связанного элемента навигации по вкладкам (т. е. идентификатор содержимого вкладки такой же, как у элемента навигации по вкладкам).

$.validator.unobtrusive.adapters.add(
  'tab-validation',
   function () {
       var tabs = $('#rItemTabs [id*=rItemTabs]'); 
       $(tabs).each(function () {
       if ($(this).has('.field-validation-error').length) {
           var tabId = '#' + $(this).attr('id');
           $('a[href=' + tabId + ']').css({ 'color': 'red', 'font-weight': 'bolder' });
       }
   });
} (jQuery));

Я надеюсь, что это имеет смысл, а также работает для вас.

Answer 4

Вот решение, которое сработало для меня:

<button type="submit" onclick="ValidateRequired();">Save</button>

function ValidateRequired(){
    $(':input[required]', '#myForm').each(function(){
        if ($(this).val() == ''){
            var errorTab = $(this).closest('div').attr('id');
            $('#tabs').tabs('select', '#'+errorTab);
        }
    });
}    

Answer 5

Вы можете искать для функции errorPlacement ()