CODEWITHSUNDEEP
jquery
Dirty Bird Design
Dirty Bird Design

Reputation: 5533

jquery validation error problem

I use this script daily and never had an issue before now. Ive been staring at it so long i can't find the issue. I have a form with an input, the input is required and has a minlength of 2. If you submit the form, it displays the "required" error message. If you enter one character and hit submit again, its adding another error message instead of changing between the two. Please help!This is using jquery.validate.js

<script type="text/javascript">
    $(document).ready(function() {
        $("#TTFirst").validate({
            errorElement: "span",
            errorPlacement: function(error, element) {
                error.appendTo( element.parent("td"));
            },

            rules: {
                    license: {
                    required: true,
                    minlength: 2
                }
            },

            messages: {
                license: {
                    required: "Please Enter Your First Name",
                    minlength: "Must be at Least 2 Characters"
                }

            }


        });

    });

</script>

HTML

<table cellspacing="1" id="credits">
    <form action="http://www.domain.com/dir/processor.php" method="post" id="TTFirst">
    <table>
    <tr class="odd">
    <td width="500">
        <label>$25 Transaction Credit for License </label>
            <input type="text" name="license" />
    </td>
    <td width="50">$26.95</td>
    <td width="150">
        <input type="hidden" name="item_number" value="41">
        <input type="submit" value="" class="orderNow" />
    </td>
        </tr>
    </table>
</form>

Upvotes: 1

Views: 191

Answers (2)

Dirty Bird Design
Dirty Bird Design

Reputation: 5533

Damdest thing ive ever seen. It works fine when put in a 

<ul>

something with the table I guess.

Upvotes: 2

Dave Kiss
Dave Kiss

Reputation: 10487

Because you are using the custom errorPlacement, it looks like the technique for messages is performed by adding the message to the title attribute of the label in question, and not in the javascript. Check this example 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://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
 <script>
  $(document).ready(function(){
   $("#myform").validate({
    errorPlacement: function(error, element) {
    error.appendTo( element.parent("td").next("td") );
   },
    debug:true
   })
  });
 </script>
 </head>

 <body>
  <form id="myform" action="/login" method="post">
   <table>
    <tr>
        <td><label>Firstname</label>
        <td><input name="fname" class="required" value="Pete" /></td>
        <td></td>
    </tr>
    <tr>
        <td><label>Lastname</label></td>
        <td><input name="lname" title="Your lastname, please!" class="required" /></td>
        <td></td>
    </tr>
    <tr>
        <td></td><td><input type="submit" value="Submit"/></td><td></td>
 </table>
 </form>
</body>
</html>

The error from the example only shows when the lname input is empty, and pulls from the title attribute.

Upvotes: 0

Related Questions