使用jquery validate plugin进行表单验证的问题

时间:2010-10-07 11:17:34

标签: jquery html css jquery-plugins jquery-validate

我有以下代码来执行下面显示的SubmitForm验证。当我点击AddressListing div标签并调用验证函数时,它只对businessname字段执行验证,但不对其他剩余的feild执行验证。只有businessname name字段将是用红色突出显示,但不是其他字段。我使用以下jquery插件来验证字段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;
}   

2 个答案:

答案 0 :(得分:1)

编辑2 您在表单字段上缺少名称属性。我在这里工作:http://jsfiddle.net/3aPHy/

$(document).ready(function() {

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

});

你不是在证实错误吗?不应该是submitForm吗?

编辑如果上述操作不起作用,请尝试:

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

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

答案 1 :(得分:0)

试试这个:

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

我不确定在验证规则中明确定义的规则中,zipcode是否已作为默认值存在

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