views:

48

answers:

2

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/>
                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;
}   
+1  A: 

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();
    });
});
Gazler
The Id for my form is SubmitForm how can i write submitForm ,Both S and F are in capital
mahesh
Errr...so are mine in the code sample. Did you try either of them?
Gazler
sorry thanks for the reply it was actually my mistake
mahesh
Is it validating now?
Gazler
both the ways are not working is their any problem with css
mahesh
is their any alternate way to fix this
mahesh
I know the problem, you are missing name fields on your inputs.
Gazler
http://jsfiddle.net/3aPHy/
Gazler
Thank you very much for your reply this link helped me to fix the problem http://jsfiddle.net/3aPHy/ thank you once again
mahesh
A: 

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 
        },
      }
jknair