开发者

Problem with form validation using jquery validate plugin

I have the following code to perform validation of SubmitForm shown below .when i click on AddressListing div tag and call the validation function ,it performs validation only for the businessname field but not for other remaining feilds.Only businessname name field will be highlighted in red color,but not other feilds. I am using the following jquery plugin to validate the fields http://jquery.bassistance.de/validate/jquery.validate.js

Example.html

<fieldset id="fieldset1"> <legend>Registration Details:</legend>
               <form id="SubmitForm">
                Name of business:<br/>
                  <input size="30" type="text" id="businessname" class="required" /><br/>               
                Zipcode:<br>
                  <input size="30" type="text" id="zipcode"  class="required zipcode"/><br>              
                Telephone:<br/>
                  <input size="30" type="text" id="telephone"  class="required phone" /><br/>
                Email:<br/>
                  <input size="30" type="text" id="email"  class="required email"/>
                     </fieldset>
                  <br/>
                Your email is your User Name:<br/>
              <input size="30" type="text" id="username" class="required"/><br/>
     开发者_StackOverflow           Choose Password:<br/>
              <input size="30" type="text" id="pass" class="required password" class="required"/><br/>
                Retype Password:<br/>
              <input size="30" type="text" id="pass1" equalTo="#pass"/><br/>               
         <input id="Addresslisting" type="image" src="images/Submit.png" align="left"  />                                
  </form>  
</feildset>

Example.js

$(document).ready(function() {

    $("#Addresslisting").click(function() {
    $("#addresslistingform").validate();
});

});

Example.css

label { width: 10em; float: left; }
label.error {

color: red; padding:8px 200px 0px 0px; vertical-align: top; float:right;
 background:url("unchecked.gif") no-repeat 120px 0px; 
    }
input.error {border:1px solid red;}
input.errorlist {margin:0; color: red; margin-bottom:10px;}
#fieldset1
{
border: 1px solid #1f76c8;
width: 500px;
margin:5px;
padding:10px 15px 5px 15px;
}   


EDIT 2 You are missing name attributes on your form fields. I have it working here: http://jsfiddle.net/3aPHy/

$(document).ready(function() {

    $("#Addresslisting").click(function() {
        $("#SubmitForm").validate();
    });

});

Aren't you validating the wrong this? Shouldn't it be submitForm?

EDIT If the above doesn't work, try:

$(document).ready(function() {
    $("#SubmitForm").validate();

    $("#Addresslisting").click(function() {
        $("#SubmitForm").submit();
    });
});


try this :

$().ready(function() 
    {
        // validate signup form on keyup and submit
        $("#SubmitForm").validate();
    }

I am not sure zipcode is already present as a default in the rules you need to explicitly define it in the rules of validate

rules: {
 zip: {      required:true,
            maxlength:6,
            number:true 
        },
      }
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜