Simplest JQuery validation rules example

16
votes

The following HTML form successfully utilizes jQuery's form validation, displaying "This field is required" to the right of the form field if left blank, and "Please enter at least 2 characters" if fewer than 2 characters were entered. However, instead of the validation metadata being specified using the class and minlength attributes on the "cname" form input field, I'd like to use jQuery's "rules" API instead, where the rules are specified in the body of the validate function. Thanks in advance:

    <!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>
4
javascriptjqueryvalidationdeclarative
I found it very helpful - Mike
Closing this question was "questionable" - Dexygen
Sorry if voting to re-open my question seems self-serving. I'll rescind my vote if I get a new "platinum" badge for asking a question that got closed but nevertheless gets 100K views (fewer than 12K views to go as of July 2013). Even if this question gets no more answers, I don't think it should have the "stigma" of being a closed question. - Dexygen
@GeorgeJempty - since it looks like we all got downvoted for closing this question, have a balancing upvote :) - LittleBobbyTables - Au Revoir
@LittleBobbyTables ah ok I'd never been the victim of a spite downvote before (or if I had I didn't know it) - Dexygen

4 Answers

14
votes
rules: {
    cname: {
        required: true,
        minlength: 2
    }
},
messages: {
    cname: {
        required: "<li>Please enter a name.</li>",
        minlength: "<li>Your name is not long enough.</li>"
    }
}
12
votes

The examples contained in this blog post do the trick.

1
votes
$("#commentForm").validate({
    rules: {
     cname : { required : true, minlength: 2 }
    }
});

Should be something like that, I've just typed this up in the editor here so might be a syntax error or two, but you should be able to follow the pattern and the documentation

0
votes

The input in the markup is missing "type", the input (text I assume) has the attribute name="name" and ID="cname", the provided code by Ayo calls the input named "cname"* where it should be "name".