Simplest jQuery validation rules example

Question

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>

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, Jul 03 '13 at 14:09
@GeorgeJempty - since it looks like we all got downvoted for closing [this question](http://stackoverflow.com/questions/27568440/is-there-some-preprocessors-for-js-like-less-for-css), have a balancing upvote :) — LittleBobbyTables - Au Revoir, Dec 19 '14 at 15:44
@LittleBobbyTables ah ok I'd never been the victim of a spite downvote before (or if I had I didn't know it) — Dexygen, Dec 19 '14 at 15:46

score 14 · Answer 1 · edited Jun 04 '14 at 21:47

14

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

edited Jun 04 '14 at 21:47

Chris Forrence

10,042
11
48
64

answered Mar 16 '09 at 13:17

Ayo

1,198
2
16
36

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 – Dexygen Mar 16 '09 at 13:44
1

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 – Dexygen Mar 16 '09 at 14:39

score 12 · Accepted Answer · edited Mar 09 '16 at 15:47

12

The examples contained in this blog post do the trick.

edited Mar 09 '16 at 15:47

Alexander Derck

13,818
5
54
76

answered Mar 16 '09 at 15:00

Dexygen

12,287
13
80
147

2

I'm being pro-active and adding a link to the article archived on web.archive.org in case the original link ever dies: http://web.archive.org/web/20120108075037/http://www.raymondcamden.com/index.cfm/2009/2/10/An-Introduction-to-jQuery-and-Form-Validation-2 – Dexygen Oct 08 '13 at 13:46
2

You should clean up this link only answer. – crthompson May 27 '15 at 18:35

score 1 · Answer 3 · edited Dec 24 '12 at 17:27

1

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

edited Dec 24 '12 at 17:27

mbinette

5,094
3
24
32

answered Mar 16 '09 at 13:22

ChadT

7,598
2
40
57

score 0 · Answer 4 · edited Nov 13 '12 at 04:06

0

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

edited Nov 13 '12 at 04:06

Jack

10,943
13
50
65

answered Sep 01 '11 at 01:20

Daniel Arnolf

1

Simplest jQuery validation rules example

4 Answers4

Linked