web-dev-qa-db-de.com

Beispiel für einfachste JQuery-Validierungsregeln

Im folgenden HTML-Formular wird die Formularvalidierung von jQuery erfolgreich verwendet. Wenn dieses Feld leer gelassen wird, wird rechts neben dem Formularfeld "Dieses Feld ist erforderlich" angezeigt, und "Bitte geben Sie mindestens zwei Zeichen ein", wenn weniger als zwei Zeichen eingegeben wurden. Anstatt die Validierungsmetadaten mit den Attributen class und minlength im Eingabefeld "cname" anzugeben, möchte ich stattdessen die API "rules" von jQuery verwenden, wobei die Regeln im Hauptteil der validate-Funktion angegeben sind. Danke im Voraus:

    <!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>
16
George Jempty

Die Beispiele in diesem Blogbeitrag machen den Trick.

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 }
    }
});

Sollte so etwas in der Art sein, habe ich dies hier nur im Editor eingetippt, daher könnte es einen oder zwei Syntaxfehler geben, aber Sie sollten in der Lage sein, dem Muster und der documentation zu folgen.

1
ChadT

Die Eingabe im Markup fehlt "type", die Eingabe (Text, von dem ich angenommen habe) hat das Attribut name="name" und ID="cname", der von Ayo bereitgestellte Code ruft die Eingabe mit dem Namen "cname" * auf, wo er "name" sein soll.

0
Daniel Arnolf