Was ist die unauffällige jQuery-Validierung?

Ich weiß, was das jQuery Validation-Plugin ist. Ich weiß, dass die jQuery Unobtrusive Validation-Bibliothek von Microsoft erstellt wurde und im ASP.NET MVC-Framework enthalten ist. Aber ich kann keine einzige Online-Quelle finden, die erklärt, was es ist. Was ist der Unterschied zwischen der Standard-jQuery-Validierungsbibliothek und der "unauffälligen" Version?

Brad Wilson hat ein paar großartige Artikel über unauffällige Validierung und unauffälligen Ajax .
Es wird auch sehr schön in diesem Pluralsight-Video im Abschnitt "AJAX und JavaScript" gezeigt.

Grundsätzlich ist es einfach die Javascript-Validierung, die Ihren Quellcode nicht mit einem eigenen Validierungscode verschmutzt . Dazu werden data-Attribute in HTML verwendet.

Mit der unauffälligen Art:

• Sie müssen die validate () -Methode nicht aufrufen.
• Sie legen Anforderungen mithilfe von Datenattributen fest (Datenwert, Datenwert erforderlich usw.).

Jquery Validate Beispiel :

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

Jquery Validate Unauffälliges Beispiel :

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

Zur Verdeutlichung finden Sie hier ein detaillierteres Beispiel, das die Formularvalidierung mit jQuery Validation Unobtrusive demonstriert.

Beide verwenden das folgende JavaScript mit jQuery:

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

Die Hauptunterschiede zwischen den beiden Plugins sind die Attribute, die für jeden Ansatz verwendet werden.

jQuery-Validierung

Verwenden Sie einfach die folgenden Attribute:

• Bei Bedarf einstellen
• Stellen Sie den Typ für die richtige Formatierung ein (E-Mail usw.)
• Legen Sie andere Attribute wie Größe (Mindestlänge usw.) fest.

Hier ist das Formular ...

<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-Validierung unauffällig

Folgende Datenattribute werden benötigt:

• data-msg-required = "Dies ist erforderlich."
• Datenregel erforderlich = "wahr / falsch"

Hier ist das Formular ...

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

Basierend auf einem dieser Beispiele wird eine Meldung angezeigt, in der Sie darüber informiert werden, dass alle Formularfelder validiert sind, wenn die erforderlichen Formularfelder ausgefüllt wurden und die zusätzlichen Attributkriterien erfüllen. Andernfalls wird in der Nähe der fehlerhaften Formularfelder Text angezeigt, der auf den Fehler hinweist.

Referenzen: - jQuery-Validierung: https://jqueryvalidation.org/documentation/

jQuery Validation Unobtrusive Native ist eine Sammlung von ASP.Net MVC HTML-Hilfserweiterungen. Diese nutzen die native Unterstützung von jQuery Validation für die Validierung, die von HTML 5-Datenattributen gesteuert wird. Microsoft hat jquery.validate.unobtrusive.js mit MVC 3 zurückgesendet. Es bot eine Möglichkeit, Datenmodellvalidierungen mithilfe einer Kombination aus jQuery Validation- und HTML 5-Datenattributen auf die Clientseite anzuwenden (dies ist der "unauffällige" Teil).