Problem with form validation using jquery validate plugin

Question

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;
}

Gazler · Accepted Answer · 2010-10-07 12:05:24Z

1

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();
    });
});

edited Oct 7, 2010 at 12:05

answered Oct 7, 2010 at 11:23

Gazler

84.4k18 gold badges285 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mahesh Over a year ago

The Id for my form is SubmitForm how can i write submitForm ,Both S and F are in capital

Gazler Over a year ago

Errr...so are mine in the code sample. Did you try either of them?

mahesh Over a year ago

is their any alternate way to fix this

Gazler Over a year ago

I know the problem, you are missing name fields on your inputs.

mahesh Over a year ago

Thank you very much for your reply this link helped me to fix the problem jsfiddle.net/3aPHy thank you once again

jknair · Accepted Answer · 2010-10-07 11:44:28Z

0

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

answered Oct 7, 2010 at 11:44

jknair

4,8141 gold badge20 silver badges20 bronze badges

Collectives™ on Stack Overflow

Problem with form validation using jquery validate plugin

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related