在Ajax请求之前进行Jquery表单验证

时间:2016-12-28 07:39:46

标签: javascript jquery ajax

我已经通过其他线程并使用了一个参考,但我仍然无法找到解决方案   我的问题是:

我在按钮点击上调用一个函数现在该函数在验证后验证我试图在提交处理程序中使用ajax请求发布数据,问题是我的字段正在验证但是没有调用Ajax请求。

<input type="button" value="Register" id="registerP" onclick="registerPatient()"  class="form-control input-sm btn-success ">

function registerPatient(){
$("#patientRegistration").validate({
rules: {
    patientName: {
    required: true,
    textOnly: true
                },
       },
messages: {
       patientName: {
       required: "Please enter the full name",                  
                    },
          },
submitHandler: function(form) { 
            $.ajax({
             type: "POST",
             url: "/LoginMavenSpringMVC/appointment/savePatient",
             data: "patientName=" + patientName,
         success: function(response){},
         error: function(e){}
      });
  }
 });
}  

但是,如果我没有使用验证并直接调用Ajax,我可以发布数据。请告诉我错误的地方。

2 个答案:

答案 0 :(得分:3)

您可以尝试这样调用jquery表单验证并检查是否已验证:

$(document).ready(function(){
  $("#patientRegistration").validate({
    rules: {
        patientName: {
        required: true,
        textOnly: true
                    },
           },
    messages: {
           patientName: {
           required: "Please enter the full name",                  
                        },
              }
     });
});

function registerPatient(){
   var IsValid=$("#patientRegistration").valid();
   if(IsValid){
     var patientName=""; //value for patient name
     $.ajax({
             type: "POST",
             url: "/LoginMavenSpringMVC/appointment/savePatient",
             data: {"patientName": patientName},
             success: function(response){},
             error: function(e){}
     });
   }
}

答案 1 :(得分:0)

将ajax的data语法更改为此。

data: {patientName:patientName},

确保你有一个关于同名“patientName”的捕获方法的参数,以便从帖子页面调用它的帖子。

这应该有用。

同时检查您的帖子中是否获得了patientName参数值。为此,首先通过“alert”检查并传递patientName参数。你会知道你得到了什么以及为什么不发布帖子。