jQuery的验证工作不正常

Question

我需要这个验证单击DIV按钮时触发。如果验证成功，我希望它提醒“很好”。

不幸的是，虽然验证火灾和所有规则检查，如果它所需的字段为空没有错误。它会错误的任何其他检查寿。

最后，如果我正确填写字段并单击按钮，则不会发生任何反应。

JS：

$(document).ready(function() { 

// Submit prompted password reset 
$("#passwordResetButton").click(function() { 

    $("#passwordResetForm").validate({ 
     rules: { 
      password: { required: true, minlength: 8, maxlength: 40, remote: { url: "/ajax/isPasswordOK", data: { product: function() { return $("#password").val(); } } } }, 
      confirmPassword: { required: true, equalTo: "#password" }, 
     }, 
     messages: { 
      password: { required: "Please enter a password", minlength: "Password must be at least 8 characters long", remote: "Password should contain: <li>At least one upper case character <li>At least one lower case character <li>At least one number <li>And may not contain any of the following: \\;-\")(&*='|$" }, 
      confirmPassword: { required: "Please confirm your password", equalTo: "The passwords do not match" }, 
      }, 
     onkeyup: false, //turn off auto validate whilst typing 
     onblur: true, 
     afterValidation: function() { 
      alert('is good'); 
     } 
    }); 
}); 
}); 

HTML：

<form id="passwordResetForm" style="width: 480px; margin: auto;"> 
     <div class="row"><p class="lead">Let's reset that password</p></div> 
     <div class="row"> 
      <div class="small-8 large-4 columns"><label>New Password:</label></div> 
      <div class="small-12 large-6 columns"><input name="password" id="password" type="password" size="20"/></div> 
     </div> 
     <div class="row"> 
      <div class="small-8 large-4 columns"><label>Confirm Password:</label></div> 
      <div class="small-12 large-6 columns"><input name="confirmPassword" id="confirmPassword" type="password" size="20"/></div> 
     </div> 
     <div class="row"> 
      <div class="large-offset-10 small-3 large-1 columns"> 
       <div id="passwordResetButton" class="small button">Submit</div> 
      </div> 
     </div> 
    </form> 

Answer 1

有你的代码的几个问题。

）.validate()是插件的初始化方法，而不是用于测试的形式的方法。换句话说，不要把它click处理器的内部或当你需要它，它也不会准备好。将.validate()放在DOM就绪事件处理程序的内部，以便在创建页面时触发一次，然后该表单立即准备好进行验证。

）这个插件没有这样的选项onblur。这就是所谓onfocusout和选项已经默认激活。 Setting this type of option to true is not valid并可能会碰坏，所以干脆离开它的初始化完全。

）没有这样的选项/函数叫做afterValidation:。你不能只是“发明”回调函数... jQuery插件必须有这些东西already specifically built into them。如果你想火的有效形式的东西，使用附带的submitHandler:回调函数。

submitHandler: function (form) { 
    alert('is good'); 
    return false; 
} 

）的表单提交使用<input type="submit" />或<button type="submit">Submit</button>。这样，插件可以自动捕获点击事件并按设计处理提交。

）小提示：为了您的自定义消息，只需使用{0}和规则的参数将被自动插入。这种代码更容易维护。

minlength: "Password must be at least {0} characters long", 

工作演示：http://jsfiddle.net/J9N3g/

我建议您阅读整篇文档，在这里：http://docs.jquery.com/Plugins/Validation

jQuery的：

$(document).ready(function() { 

    $("#passwordResetForm").validate({ 
     rules: { 
      password: { 
       required: true, 
       minlength: 8, 
       maxlength: 40, 
       remote: { 
        url: "/ajax/isPasswordOK", 
        data: { 
         product: function() { 
          return $("#password").val(); 
         } 
        } 
       } 
      }, 
      confirmPassword: { 
       required: true, 
       equalTo: "#password" 
      }, 
     }, 
     messages: { 
      password: { 
       required: "Please enter a password", 
       minlength: "Password must be at least {0} characters long", 
       remote: "Password should contain: <li>At least one upper case character <li>At least one lower case character <li>At least one number <li>And may not contain any of the following: \\;-\")(&*='|$" 
      }, 
      confirmPassword: { 
       required: "Please confirm your password", 
       equalTo: "The passwords do not match" 
      }, 
     }, 
     onkeyup: false, //turn off auto validate whilst typing 
     submitHandler: function (form) { 
      alert('is good'); 
      return false; 
     } 
    }); 

}); 

HTML：

<form id="passwordResetForm" style="width: 480px; margin: auto;"> 
    <div class="row"> 
     <p class="lead">Let's reset that password</p> 
    </div> 
    <div class="row"> 
     <div class="small-8 large-4 columns"> 
      <label>New Password:</label> 
     </div> 
     <div class="small-12 large-6 columns"> 
      <input name="password" id="password" type="password" size="20" /> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="small-8 large-4 columns"> 
      <label>Confirm Password:</label> 
     </div> 
     <div class="small-12 large-6 columns"> 
      <input name="confirmPassword" id="confirmPassword" type="password" size="20" /> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="large-offset-10 small-3 large-1 columns"> 
      <input type="submit" id="passwordResetButton" class="small button" /> 
     </div> 
    </div> 
</form> 

Answer 2

更改为

afterValidation: function() { 
      alert('is good'); 
     } 

到

submitHandler: function() { alert("is good!") }: 

见JQuery验证选项：http://docs.jquery.com/Plugins/Validation/validate

更改div来按钮，它最好的做法

<div id="passwordResetButton" class="small button">Submit</div> 

到

<button id="passwordResetButton" class="small button">Submit</button> 

Answer 3

我有类似的问题，发布我的解决方案，因为它可能有助于某人。 电子邮件，日期选择器，错误消息，最小和最大长度为jsFiddle的表单验证参考。

HTML：

<h1>Form Validation Example</h1> 
<form id='registerForm' name='registerForm' method='post' action='' > <p> 
    First Name: <input type='text' name='name' id='name' class='required' /> 
    </p> 
    <p> 
     Sur Name: <input type='text' name='surname' id='surname' class='required' /> 
    </p>   
    <p> 
     Email: <input type='text' name='email' id='email' class='required' /> 
    </p>   
    <p>Date: <input id="startDate" type="text" name="startDate" /></p> 
    <p> 
     <input type='submit' name='Submit' value='Submit' /> 
    </p> 
</form> 

JS：

$(document).ready(function(){ 
    $("#startDate").datepicker(); 
    $("#registerForm").validate({ 
     rules:{ 
      startDate:{ 
       required: true 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      surname: { 
       required: true, 
       minlength: 2, 
       maxlength: 5 
      }      
     }, 
     messages: { 
      name: "Please specify your name", 
      email: { 
       required: "We need your email address to contact you", 
       email: "Your email address must be in the format of name@domain.com" 
      } 
     }   
    }); 
});