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

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

Ответ 1

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

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

Ответ 2

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

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

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

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

Jquery Validate Unobtrusive Example:

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

Ответ 3

Для пояснения здесь приведен более подробный пример демонстрации проверки формы с использованием проверки jQuery. Ненавязчивый.

Оба используют следующий 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/

Ответ 4

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