it-swarm.com.de

Was ist die unauffällige jQuery-Validierung?

Ich weiß, was das Plugin für die jQuery-Validierung 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 Validation-Bibliothek und der "unauffälligen" Version?

136
user1438940

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

Grundsätzlich ist es einfach die Javascript-Validierung, die den your Quellcode nicht mit seinem eigenen validation Code verschmutzt. Dies geschieht mit data- Attribute in HTML.

119
bertl

Mit der unauffälligen Art:

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

Jquery Validate Example:

<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>
98
James Lawruk

Zur Verdeutlichung finden Sie hier ein ausführlicheres Beispiel, das die Formularvalidierung mithilfe von 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 Validation

Verwenden Sie einfach die folgenden Attribute:

  • Erforderlich einstellen, falls erforderlich
  • Typ für korrekte Formatierung festlegen (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."
  • data-rule-required = "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, dass alle Formularfelder überprüft wurden, wenn die erforderlichen Formularfelder ausgefüllt wurden und die zusätzlichen Attributkriterien erfüllen. Andernfalls wird in der Nähe der fehlerhaften Formularfelder ein Text angezeigt, der auf den Fehler hinweist.

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

17

jQuery Validation Unobtrusive Native ist eine Sammlung von ASP.Net MVC HTML-Hilfserweiterungen. Diese verwenden 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ückgeliefert. Es bot eine Möglichkeit, Datenmodellvalidierungen auf der Clientseite mithilfe einer Kombination aus jQuery Validation- und HTML 5-Datenattributen anzuwenden (dies ist der "unauffällige" Teil).

6
bimal