如何使用jquery验证模态内的表单？

Question

这是我的模态表格

    <div i class="modal fade" id="change-pass" role="dialog">
                            <div class="modal-dialog modal-sm">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                                  <h4 class="modal-title">Change password</h4>
                                  </div>
                                  <form id="passwordChangeModal" name="passwordChangeModal" method="post" >
                                      <div class="modal-body">

                                    <div class="form-group clearfix">
                                      <label class="col-sm-12" for="oldPassword">Old password</label>
                                      <div class="col-sm-12">
                                        <input type="text" class="form-control" id="oldPassword" placeholder="Enter old password" name="oldPassword">
                                      </div>
                                    </div>

                                    <div class="form-group clearfix">
                                      <label class="col-sm-12" for="newPassword">New password</label>
                                      <div class="col-sm-12">
                                        <input type="text" class="form-control" id="newPassword" placeholder="Enter new password" name="newPassword">
                                      </div>
                                    </div>

                                    <div class="form-group clearfix">
                                      <label class="col-sm-12" for="confirmpassword">Confirm password</label>
                                      <div class="col-sm-12">
                                        <input type="text" class="form-control" id="confirmpassword" placeholder="confirm password" name="confirmpassword">
                                      </div>
                                    </div>

                                </div>
                                <div class="modal-footer">
                                  <button type="submit" class="btn btn-success" data-dismiss="modal" id="updatePassword" name="updatePassword" >Save</button>
                                </div>
                                      </form>

                              </div>
                                  </div>
                          </div>

和我的jquery代码

     $().ready(function() {

  $('#updatePassword').on('click', function() {

        $("#passwordChangeModal").validate({

            rules: {
                oldPassword:"required",
                newPassword:"required",
                confirmpassword:{
                    require :"true",
                    equalTo : "#oldPassword"
                } 
            },
            messages: {
                oldPassword:"Please enter Old Password ",
                newPassword: "Please enter New Password",
                confirmpassword:"Retype password is incorrect"
            },

            submitHandler: function(){//to pass all data of a form serial
                var formData = $("#passwordChangeModal").serialize();
                $.ajax({
                    url:'/changePassword',
                    type:'post',
                    datatype: 'json',
                    data: formData,
                    success : function(response){
                        if(response == "true"){
                            window.location = '/accounts';
                        } else {
                            alert("password incorrect");
                        }
                    },
                    error: function (request,status, error) {
                    }
                });
                return false;
            }
        });
   /* });*/
  // });
});

。单击“保存”按钮时，表单验证无效。提交模式内的模式是取消没有任何验证。请帮我解决这个问题。提前谢谢

Answer 1

我想用这种方式。

$(function() {

    $('#updatePassword').on('click', function() {

      var formData = $("#passwordChangeModal").serialize();
      $.ajax({
          url:'/changePassword',
          type:'post',
          datatype: 'json',
          data: formData,
          success : function(response){
              if(response == "true"){
                  window.location = '/accounts';
              } else {
                  alert("password incorrect");
              }
          },
          error: function (request,status, error) {
          }
      });
      return false;
    });
});