使用 jquery validate 插件进行表单验证的问题答案

【问题标题】：Problem with form validation using jquery validate plugin使用 jquery validate 插件进行表单验证的问题
【发布时间】：2010-10-07 11:17:34
【问题描述】：

我有以下代码来执行如下所示的 SubmitForm 验证。当我单击 AddressListing div 标签并调用验证函数时，它只对业务名称字段执行验证，而不对其他剩余字段执行验证。只有业务名称字段将是以红色突出显示，但不是其他字段。我正在使用以下 jquery 插件来验证字段http://jquery.bassistance.de/validate/jquery.validate.js

示例.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;
}

【问题讨论】：

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

【解决方案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();
    });
});

【讨论】：

我的表单的 ID 是 SubmitForm 我怎么写 submitForm ，S 和 F 都是大写
Errr...所以我在代码示例中。您尝试过其中任何一个吗？
是他们解决此问题的任何替代方法
我知道问题所在，您的输入中缺少名称字段。
非常感谢您的回复，此链接帮助我解决了问题jsfiddle.net/3aPHy再次感谢您

【解决方案2】：

试试这个：

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

我不确定邮政编码是否已经作为默认规则出现在您需要在验证规则中明确定义它的规则中

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

【讨论】：