JQuery Unobtrusive Validation nedir?

JQuery Doğrulama eklentisinin ne olduğunu biliyorum. JQuery Unobtrusive Validation kitaplığının Microsoft tarafından yapıldığını ve ASP.NET MVC çerçevesine dahil edildiğini biliyorum. Ancak ne olduğunu açıklayan tek bir çevrimiçi kaynak bulamıyorum. Standart jQuery Doğrulama kitaplığı ile "göze batmayan" sürüm arasındaki fark nedir?

Brad Wilson'ın göze batmayan doğrulama ve göze batmayan ajax hakkında birkaç harika makalesi var .
Ayrıca bu Pluralsight videosunda "AJAX ve JavaScript" bölümünde çok güzel bir şekilde gösteriliyor .

Temel olarak, kaynak kodunuzu kendi doğrulama koduyla kirletmeyen , Javascript doğrulamasıdır . Bu, HTML'deki öznitelikler kullanılarak yapılır .data-

Göze batmayan bir şekilde:

• Validate () yöntemini çağırmanıza gerek yoktur.
• Veri özniteliklerini (data-val, data-val-required, vb.) Kullanarak gereksinimleri belirlersiniz.

Jquery Validate Örneği :

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

Jquery Göze batmayan Örneği Doğrulayın :

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

Açıklık getirmek için, burada jQuery Validation Unobtrusive kullanarak Form Doğrulamayı gösteren daha ayrıntılı bir örnek bulunmaktadır.

Her ikisi de jQuery ile aşağıdaki JavaScript'i kullanır:

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

İki eklenti arasındaki temel farklar, her yaklaşım için kullanılan özelliklerdir.

jQuery Doğrulaması

Aşağıdaki özellikleri kullanmanız yeterlidir:

• Gerekirse ayarlayın
• Uygun biçimlendirme için türü ayarlayın (e-posta vb.)
• Boyut (minimum uzunluk vb.) Gibi diğer özellikleri ayarlayın.

İşte form ...

<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 Doğrulaması Göze batmayan

Aşağıdaki veri niteliklerine ihtiyaç vardır:

• data-msg-required = "Bu gereklidir."
• data-rule-required = "doğru / yanlış"

İşte form ...

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

Bu örneklerden herhangi birine bağlı olarak, gerekli form alanları doldurulmuşsa ve ek özellik kriterlerini karşılıyorlarsa, tüm form alanlarının doğrulandığını bildiren bir mesaj açılır. Aksi takdirde, sorun teşkil eden form alanlarının yanında hatayı belirten metin olacaktır.

Referanslar: - jQuery Doğrulaması: https://jqueryvalidation.org/documentation/

jQuery Validation Unobtrusive Native, ASP.Net MVC HTML yardımcı uzantılarının bir koleksiyonudur. Bunlar, jQuery Validation'ın HTML 5 veri öznitelikleri tarafından yönlendirilen doğrulama için yerel desteğini kullanır. Microsoft, jquery.validate.unobtrusive.js'yi MVC 3 ile birlikte geri gönderdi. Bu, jQuery Doğrulaması ve HTML 5 veri özniteliklerinin bir kombinasyonunu kullanarak veri modeli doğrulamalarını istemci tarafına uygulamak için bir yol sağladı (bu "göze çarpmayan" kısımdır).