web-dev-qa-db-fra.com

Qu'est-ce que la validation discrète jQuery?

Je sais ce qu'est le plugin jQuery Validation. Je sais que la bibliothèque jQuery Unobtrusive Validation a été créée par Microsoft et est incluse dans le framework ASP.NET MVC. Mais je ne trouve pas une seule source en ligne qui explique ce que c'est. Quelle est la différence entre la bibliothèque standard de validation jQuery et la version "discrète"?

javascriptjqueryasp.netasp.net-mvcvalidation
136
user1438940

Brad Wilson a publié quelques excellents articles sur validation non intrusive et ajax non intrusif .
Il est également très bien montré dans cette vidéo Pluralsight dans la section sur "AJAX et JavaScript".

Fondamentalement, c’est simplement une validation Javascript qui ne pollue pas votre code source avec sa propre validation code. Ceci est fait en utilisant les attributs data- en HTML.

119
bertl

Avec la manière discrète:

  • Vous n'êtes pas obligé d'appeler la méthode validate ().
  • Vous spécifiez des exigences à l'aide d'attributs de données (data-val, data-val-required, etc.)

Exemple de validation Jquery:

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

Jquery valide un exemple non intrusif:

<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

Pour plus de clarté, voici un exemple plus détaillé illustrant la validation de formulaire à l'aide de jQuery Validation Unobtrusive.

Les deux utilisent le code JavaScript suivant avec jQuery:

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

Les principales différences entre les deux plugins sont les attributs utilisés pour chaque approche.

Validation jQuery

Utilisez simplement les attributs suivants:

  • Set requis si nécessaire
  • Définir le type pour un formatage approprié (email, etc.)
  • Définissez d'autres attributs tels que la taille (longueur minimale, etc.)

Voici le formulaire ...

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

Validation jQuery discrète

Les attributs de données suivants sont nécessaires:

  • data-msg-required = "Ceci est requis."
  • data-rule-required = "true/false"

Voici le formulaire ...

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

Selon l'un ou l'autre de ces exemples, si les champs de formulaire requis ont été remplis et qu'ils répondent aux critères d'attribut supplémentaires, un message apparaîtra pour vous informer que tous les champs de formulaire sont validés. Sinon, il y aura du texte près des champs de formulaire incriminés qui indiquera l'erreur.

Références: - Validation jQuery: https://jqueryvalidation.org/documentation/

17
Richard Nalezynski

validation jQuery Unobtrusive Native est une collection d'extensions d'assistance HTML ASP.Net MVC. Celles-ci utilisent le support natif de jQuery Validation pour la validation basée sur les attributs de données HTML 5. Microsoft a renvoyé jquery.validate.unobtrusive.js avec MVC 3. Cela permettait d'appliquer des validations de modèle de données côté client à l'aide d'une combinaison d'attributs de validation jQuery et HTML 5 (c'est la partie "non intrusive").

6
bimal