views:

10060

answers:

3

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"&gt;
<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>

EDIT: My original HTML is now online at http://www.methodify.com/HTML-1.html

Ayo's attempt, which I very much appreciate, but unfortunately does not work, is now online at: http://www.methodify.com/HTML-2.html

+1  A: 
    rules:
                {
                    cname:
                        {
                            required: true,
                            minlength: 2
                        }

                }
    messages:
                {
                    cname:
                    {
                        required: "<li>Please enter a name.</li>",
                        minlength: "<li>Your name is not long enough.</li>"
                    }
                }
Ayo
Hi I appreciate your effort. However I was not able to get it to work. I actually tried something pretty much just like this several times before, that is why I posted here on SO. Am editing original question to indicate location of HTML files I've uploaded to one of my sites
George Jempty
Ok, there needs to be a comma at the end of the rules block, before the messages block, and curly braces around both blocks. This rectifies simple Javascript errors, and I've updated the HTML-2 file online, but the validation still does not work :( I'm sure it's simple, just need to get past this
George Jempty
+1  A: 

$("#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

DaRKoN_
+1  A: 

The examples contained in this blog post do the trick:

http://www.coldfusionjedi.com/index.cfm/2009/2/10/An-Introduction-to-jQuery-and-Form-Validation-2

George Jempty