web-dev-qa-db-fra.com

Exemple de règles de validation JQuery les plus simples

Le formulaire HTML suivant utilise avec succès la validation de formulaire de jQuery, affichant "Ce champ est obligatoire" à droite du champ de formulaire s'il est laissé vide et "Veuillez entrer au moins 2 caractères" si moins de 2 caractères ont été entrés. Cependant, au lieu que les métadonnées de validation soient spécifiées à l'aide des attributs class et minlength du champ de saisie de formulaire "cname", j'aimerais utiliser l'API "rules" de jQuery, où les règles sont spécifiées dans le corps de la fonction validate. Merci d'avance:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="/lib/js/jquery.js"></script>
  <script src="/lib/js/jquery.validate.js"></script>
  <script>
  $(document).ready(function(){$("#commentForm").validate(
    /*
     rules/messages here
    */
    );}
    );
  </script>
</head>
<body>

 <form id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>
javascriptjqueryvalidationdeclarative
16
George Jempty

Les exemples contenus dans cet article de blog font l'affaire.

12
George Jempty
rules: {
    cname: {
        required: true,
        minlength: 2
    }
},
messages: {
    cname: {
        required: "<li>Please enter a name.</li>",
        minlength: "<li>Your name is not long enough.</li>"
    }
}
14
Ayo
$("#commentForm").validate({
    rules: {
     cname : { required : true, minlength: 2 }
    }
});

Devrait être quelque chose comme ça, je viens de taper cela dans l'éditeur ici, donc ça pourrait être une erreur de syntaxe ou deux, mais vous devriez pouvoir suivre le modèle et la documentation

1
ChadT

L'entrée dans le balisage est manquante "type", l'entrée (le texte je suppose) a l'attribut name="name" et ID="cname", le code fourni par Ayo appelle l'entrée nommée "cname" * où elle devrait être "nom" .

0
Daniel Arnolf