在Ajax请求之前进行JQuery表单验证 [英] Jquery form validation before Ajax request

问题描述

我已经遍历了其他线程并使用了一个线程作为参考，但是仍然找不到解决方案.
我的问题是:

I have gone through other threads and used one for reference but still I am not able to find the solution.
My question is:

我现在在按钮单击时调用一个函数，该函数在验证后具有验证性.我正在尝试在提交处理程序中使用ajax请求发布数据，问题是我的字段正在得到验证，但未调用Ajax请求.

I am calling a function on button click now that function has validation after validation I am trying to post data with ajax request in submit handler, problem is my fields are getting verified but Ajax request is not invoked.

<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，则可以发布数据.请建议我要去哪里错了.

However if I am not using validation and calling Ajax directly i am able to post the data. Please suggest where I am going Wrong.

推荐答案

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

You can try like this which call jquery form validation and check if validated:

$(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){}
     });
   }
}

这篇关于在Ajax请求之前进行JQuery表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！