Qu'est-ce que jQuery Unobtrusive Validation?

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 de validation jQuery standard et la version "discrète"?

Brad Wilson a quelques bons articles sur la validation discrète et l' Ajax discret .
Il est également très bien montré dans cette vidéo Pluralsight dans la section "AJAX et JavaScript".

En gros, c'est simplement une validation Javascript qui ne pollue pas votre code source avec son propre code de validation . Cela se fait en utilisant des data-attributs en HTML.

Avec la manière discrète:

• Vous n'avez pas besoin d'appeler la méthode validate ().
• Vous spécifiez les 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>

Exemple Jquery Validate Unobtrusive :

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

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 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éfinissez le type pour un formatage approprié (e-mail, 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 obligatoire."
• data-rule-required = "vrai / faux"

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>

Sur la base de l'un ou l'autre de ces exemples, si les champs de formulaire obligatoires 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 indique l'erreur.

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

jQuery Validation Unobtrusive Native est une collection d'extensions d'assistance HTML ASP.Net MVC. Ceux-ci utilisent la prise en charge native de jQuery Validation pour la validation basée sur les attributs de données HTML 5. Microsoft a livré jquery.validate.unobtrusive.js avec MVC 3. Il a fourni un moyen d'appliquer des validations de modèle de données côté client en utilisant une combinaison d'attributs de données jQuery Validation et HTML 5 (c'est la partie «discrète»).