Apa itu Validasi jQuery Unobtrusive?

Saya tahu apa itu plugin Validasi jQuery. Saya tahu perpustakaan Validasi jQuery Unobtrusive dibuat oleh Microsoft dan disertakan dalam kerangka ASP.NET MVC. Tetapi saya tidak dapat menemukan satu sumber online yang menjelaskan apa itu. Apa perbedaan antara pustaka Validasi jQuery standar dan versi "tidak mencolok"?

Brad Wilson memiliki beberapa artikel hebat tentang validasi yang tidak mencolok dan tidak mencolok .
Ini juga ditampilkan dengan sangat baik dalam video Pluralsight ini di bagian "AJAX dan JavaScript".

Pada dasarnya, ini hanya validasi Javascript yang tidak mencemari kode sumber Anda dengan kode validasinya sendiri . Ini dilakukan dengan memanfaatkan data-atribut dalam HTML.

Dengan cara yang tidak mencolok:

• Anda tidak perlu memanggil metode validate ().
• Anda menentukan persyaratan menggunakan atribut data (data-val, data-diperlukan, dll.)

Contoh Validasi Jquery :

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

Contoh Jquery Validate Unobtrusive :

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

Untuk klarifikasi, berikut adalah contoh yang lebih terperinci yang menunjukkan Validasi Formulir menggunakan jQuery Validation Unobtrusive.

Keduanya menggunakan JavaScript berikut dengan jQuery:

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

Perbedaan utama antara kedua plugin adalah atribut yang digunakan untuk setiap pendekatan.

Validasi jQuery

Cukup gunakan atribut berikut:

• Setel jika diperlukan
• Setel jenis untuk pemformatan yang benar (email, dll.)
• Tetapkan atribut lain seperti ukuran (panjang min, dll.)

Ini formulirnya ...

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

Validasi jQuery Tidak Mengganggu

Atribut data berikut diperlukan:

• data-msg-required = "Ini wajib diisi."
• data-rule-required = "true / false"

Ini formulirnya ...

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

Berdasarkan salah satu dari contoh ini, jika bidang formulir yang diperlukan telah diisi, dan mereka memenuhi kriteria atribut tambahan, maka pesan akan muncul memberitahukan bahwa semua bidang formulir divalidasi. Kalau tidak, akan ada teks di dekat bidang formulir menyinggung yang menunjukkan kesalahan.

Referensi: - Validasi jQuery: https://jqueryvalidation.org/documentation/

jQuery Validation Unobtrusive Native adalah kumpulan ekstensi pembantu ASP.Net MVC HTML. Ini menggunakan dukungan asli jQuery Validation untuk validasi yang didorong oleh atribut data HTML 5. Microsoft mengirimkan jquery.validate.unobtrusive.js kembali dengan MVC 3. Ini memberikan cara untuk menerapkan validasi model data ke sisi klien menggunakan kombinasi jQuery Validation dan atribut data HTML 5 (itulah bagian "tidak mencolok").