Что такое ненавязчивая проверка jQuery?

Я знаю, что такое плагин проверки jQuery. Я знаю, что библиотека JQuery Unobtrusive Validation была создана Microsoft и включена в платформу ASP.NET MVC. Но я не могу найти ни одного онлайн-источника, который бы объяснил, что это такое. В чем разница между стандартной библиотекой jQuery Validation и «ненавязчивой» версией?

У Брэда Уилсона есть пара замечательных статей о ненавязчивой валидации и ненавязчивом Ajax .
Это также очень хорошо показано в этом видео Pluralsight в разделе «AJAX и JavaScript».

По сути, это просто проверка Javascript, которая не загрязняет ваш исходный код собственным кодом проверки . Это делается путем использования data-атрибутов в HTML.

С ненавязчивым способом:

• Вам не нужно вызывать метод validate ().
• Вы задаете требования, используя атрибуты данных (data-val, data-val-required и т. Д.)

Пример проверки Jquery :

<input type="text" name="email" class="required">
<script>
        $(function () {
            $("form").validate();
        });
</script>

Jquery Validate Ненавязчивый пример :

<input type="text" name="email" data-val="true" 
data-val-required="This field is required.">  

<div class="validation-summary-valid" data-valmsg-summary="true">
    <ul><li style="display:none"></li></ul>
</div>

Для пояснения, вот более подробный пример, демонстрирующий проверку формы с использованием jQuery Validation Unobtrusive.

Оба используют следующий JavaScript с jQuery:

  $("#commentForm").validate({
    submitHandler: function(form) {
      // some other code
      // maybe disabling submit button
      // then:
      alert("This is a valid form!");
//      form.submit();
    }
  });

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

Проверка jQuery

Просто используйте следующие атрибуты:

• Установить требуется при необходимости
• Установите тип для правильного форматирования (электронная почта и т. Д.)
• Установите другие атрибуты, такие как размер (минимальная длина и т. Д.)

Вот форма ...

<form id="commentForm">
  <label for="form-name">Name (required, at least 2 characters)</label>
  <input id="form-name" type="text" name="form-name" class="form-control" minlength="2" required>
  <input type="submit" value="Submit">
</form>

Проверка JQuery Ненавязчива

Необходимы следующие атрибуты данных:

• data-msg-required = "Это необходимо."
• данных правил требуется = «истина / ложь»

Вот форма ...

<form id="commentForm">
  <label for="form-x-name">Name (required, at least 2 characters)</label>
  <input id="form-x-name" type="text" name="name" minlength="2" class="form-control" data-msg-required="Name is required." data-rule-required="true">
  <input type="submit" value="Submit">
</form>

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

Ссылки: - Проверка jQuery: https://jqueryvalidation.org/documentation/

jQuery Validation Ненавязчивый Native - это коллекция вспомогательных расширений HTML.COM ASP.Net MVC. Они используют встроенную поддержку jQuery Validation для проверки, основанной на атрибутах данных HTML 5. Microsoft отправила jquery.validate.unobtrusive.js обратно в MVC 3. Он предоставил способ применить проверки модели данных на стороне клиента, используя комбинацию атрибутов данных jQuery Validation и HTML 5 (это «ненавязчивая» часть).