2

I'm trying to use jquery validation with a rule/message set and can't seem to get it working. Relativeny new to JQuery, so apologies if it's a basic question. I'm trying to use document.forms[0] instead of a form ID. It works with simple validation where the field has class="required" but not if I try to introduce rules. Any help greatly appreciated. Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-        validation/jquery.validate.js"></script>
  <script>
  $(document).ready(function(){
    $(document.forms[0]).validate({
    rules: {
      cname: {
      required: true,
    }
    },
    messages: {
      cname: "Please enter a valid Name."
    },
  });
  });
  </script>

</head>
<body>


 <form class="cmxform" 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"/>
   </p>

   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>
4
  • OT, but $(document.forms[0]) could just as easily be $('form:first')
    – Jamiec
    Dec 18, 2012 at 16:34
  • 1
    Try putting the name attribute as cname as well. I can't remember if the validator looks for the id or name.
    – Jack
    Dec 18, 2012 at 16:45
  • As comment above it work with the name :) jsfiddle.net/peGF3
    – phemt.latd
    Dec 18, 2012 at 16:51
  • Thanks folks. That sorted it.
    – nelsie
    Dec 18, 2012 at 17:01

2 Answers 2

2

Firstly, you can just target your form by its id, #commentForm. Secondly, the root cause of your problem was that you were improperly targeting the input field by its id attribute. However, the .validate() plugin is looking for the name attribute, which in your case, also happened to be "name". I've changed the value of the name attribute in my example below just to make it more clear.

jQuery:

$(document).ready(function(){
    $('#commentForm').validate({
        rules: {
           username: {
               required: true
           }
        },
        messages: {
           username: "Please enter a valid Name."
        }
    });
});

HTML:

<form class="cmxform" id="commentForm" method="get" action="">

    <input type="text" id="cname" name="username" />

    ....

Working DEMO:

http://jsfiddle.net/egdEn/

See the online documentation for more info.

1
  • That's why I always make my name and ID the same word, in case my memory fails me
    – Brad
    Dec 19, 2012 at 12:59
2

I suppose I'll answer the question since my comment was correct.

Try putting the name attribute as "cname" as well. The validator looks for the name attribute.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.