Jquery验证提交处理程序不工作与Ajax

Question

我想提交表单使用jquery验证和ajax.But它does not work.neither它会引发任何错误。

下面是HTML

{% if form %} 
      <form method="POST" action="." id="change_password_form"> 
       {% csrf_token %} 
       {{ form.as_p }} 
       <input type="submit" name="action" value="{% trans 'change password' %}"/> 
      </form> 
     {% else %} 
      <p>{% trans 'Your password is now changed.' %}</p> 
     {% endif %} 

这里是脚本

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> 

    <script type="text/javascript"> 
     $(function() { 
     $("#change_password_form").validate({ 
      rules: { 
       password1: { 
        required: true, 
        maxlength:10 

       }, 
       password2: { 
        required: true, 
        maxlength:10 
       }, 
      }, 

      messages: { 
       password1: { 
        required: "Please provide a password", 
       }, 
       password2: { 
        required: "Please Confirm your password", 
       }, 
      }, 

      submitHandler: function(form) { 

       var pass = $('input[name=password1]').val(); 
       var repass = $('input[name=password2]').val(); 

       if (pass != repass) { 
        console.log("error") 
       } 
       else { 
         $.ajax({ 
          type: $(form).attr('method'), 
          url: $(form).attr('action'), 
          data: $(form).serialize(), 
         }) 
         .done(function (response) { 
          $('#loading-image').hide(); 
          if (response.location == 'accounts/password/reset/key/done/'){ 
           window.location = "{% url 'home' %}" 
         } 

         }).error(function(response){ 
          console.log(response) 

         }); 
      return false; 
      } 
     }); 
    }); 
    </script> 

不知何故提交事件没有发生？我能做些什么来提交表单使用Ajax和jQuery验证

Answer 1

我在你的代码做了一些小的改变，我想你有一个错字。

问题是你使用的规则没有“”，jquery.validate无法识别。

我还添加了一个自定义验证来控制密码是否相同，所有验证都应该使用标准规则或习惯，但不应将验证添加到submitHandler方法中。

$("#change_password_form").validate({ 
     rules: { 
      "password1": { 
       required: true, 
       maxlength:10, 
       "isSamePassword": true 
      }, 
      "password2": { 
       required: true, 
       maxlength:10, 
       "isSamePassword": true 
      } 
     }, 

     messages: { 
      "password1": { 
       required: "Please provide a password", 
       maxlength:"Max 10", 
       isSamePassword: "Pwd no son iguales" 
      }, 
      "password2": { 
       required: "Please provide a password", 
       maxlength:"Max 10", 
       isSamePassword: "Pwd no son iguales" 
      } 
     }, 

     submitHandler: function(form) { 

      $.ajax({ 
        type: $(form).attr('method'), 
        url: $(form).attr('action'), 
        data: $(form).serialize(), 
       }) 
       .done(function (response) { 
        $('#loading-image').hide(); 
        if (response.location == 'accounts/password/reset/key/done/'){ 
         window.location = "{% url 'home' %}" 
       } 

       }).error(function(response){ 
        console.log(response) 

       }); 
      } 
    }); 
    $.validator.addMethod("isSamePassword", function(value) { 
     var pass = $('input[name=password1]').val(); 
     var repass = $('input[name=password2]').val(); 
     return pass === repass; 
    }, 'Pwd no son iguales');