Що таке jQuery Ненав'язлива перевірка?

Я знаю, що таке плагін jQuery Validation. Я знаю, що бібліотека ненав’язливої ​​перевірки jQuery була створена корпорацією Майкрософт та включена в рамку ASP.NET MVC. Але я не можу знайти жодного Інтернет-джерела, яке пояснює, що це таке. Чим відрізняється стандартна бібліотека перевірки jQuery від "ненав'язливої" версії?

У Бреда Вілсона є кілька чудових статей про ненав’язливу перевірку та ненав'язливий аякс .
Це також дуже добре показано у цьому відео Pluralsight у розділі "AJAX та JavaScript".

В основному, просто перевірка Javascript не забруднює ваш вихідний код власним кодом перевірки . Це робиться за допомогою використання data-атрибутів у HTML.

З ненав'язливим способом:

• Вам не доведеться викликати метод validate ().
• Ви визначаєте вимоги, використовуючи атрибути даних (data-val, data-val-необхідні тощо)

Приклад перевірки 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 = "Це потрібно."
• data-rule-Requated = "true / false"

Ось форма ...

<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 Валідація Ненав'язливий Native - це колекція допоміжних розширень HTML для ASP.Net MVC. Вони використовують вбудовану підтримку jQuery Validation для валідації, керовану атрибутами даних HTML 5. Microsoft постачала jquery.validate.unobtrusive.js назад з MVC 3. Це дало спосіб застосувати перевірку моделі даних до клієнтської сторони за допомогою комбінації атрибутів даних jQuery Validation та HTML 5 (це "ненав'язлива" частина).