Wat is jQuery onopvallende validatie?

Ik weet wat de jQuery Validation-plug-in is. Ik weet dat de jQuery Unobtrusive Validation-bibliotheek is gemaakt door Microsoft en is opgenomen in het ASP.NET MVC-framework. Maar ik kan geen enkele online bron vinden die uitlegt wat het is. Wat is het verschil tussen de standaard jQuery-validatiebibliotheek en de “onopvallende” versie?


Antwoord 1, autoriteit 100%

Brad Wilson heeft een aantal geweldige artikelen over onopvallende validatieen onopvallende ajax.
Het wordt ook heel mooi getoond in deze Pluralsight-videoin de sectie over ” AJAX en JavaScript”.

Kortom, het is gewoon Javascript-validatie die uwbroncode niet vervuilt met zijn eigen validatiecode. Dit wordt gedaan door gebruik te maken van data-attributen in HTML.


Antwoord 2, autoriteit 83%

Op de onopvallende manier:

  • Je hoeft de methode valid() niet aan te roepen.
  • U specificeert vereisten met behulp van data-attributen (data-val, data-val-required, etc.)

JQuery valideren voorbeeld:

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

Jquery valideren onopvallend voorbeeld:

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

Antwoord 3, autoriteit 15%

Ter verduidelijking, hier is een meer gedetailleerd voorbeeld dat Formuliervalidatie demonstreert met jQuery Validation Unobtrusive.

Beiden gebruiken het volgende JavaScript met jQuery:

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

De belangrijkste verschillen tussen de twee plug-ins zijn de attributen die voor elke benadering worden gebruikt.

jQuery-validatie

Gebruik gewoon de volgende attributen:

  • Instellen vereist indien nodig
  • Stel het type in voor de juiste opmaak (e-mail, enz.)
  • Stel andere kenmerken in, zoals grootte (minimale lengte, enz.)

Hier is het formulier…

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

De volgende gegevenskenmerken zijn nodig:

  • data-msg-required=”Dit is vereist.”
  • data-rule-required=”true/false”

Hier is het formulier…

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

Als op basis van een van deze voorbeelden de vereiste formuliervelden zijn ingevuld en ze voldoen aan de aanvullende attribuutcriteria, verschijnt er een bericht met de melding dat alle formuliervelden zijn gevalideerd. Anders zal er tekst in de buurt van de beledigende formuliervelden staan die de fout aangeeft.

Referenties:
– jQuery-validatie: https://jqueryvalidation.org/documentation/


Antwoord 4, autoriteit 5%

jQuery-validatie Unobtrusive Native is een verzameling ASP.Net MVC HTML-helperextensies.
Deze maken gebruik van de native ondersteuning van jQuery Validation voor validatie op basis van HTML 5-gegevensattributen.
Microsoft heeft jquery.validate.unobtrusive.js teruggestuurd met MVC 3.
Het bood een manier om gegevensmodelvalidaties aan de clientzijde toe te passen met behulp van een combinatie van jQuery-validatie en HTML 5-gegevensattributen
(dat is het “onopvallende” deel).

Other episodes