防止表单提交,直到ajax响应

时间:2016-06-20 10:53:38

标签: javascript jquery ajax

在表单提交时,执行函数validate(),函数检查用户输入的有效性。

验证标准包括一个ajax,用于检查输入的电子邮件是否已注册。

问题是在ajax响应之前,它会被执行其他验证并提交表单,总是无法检查电子邮件记录的唯一性。

有没有办法可以确保函数validate() 顺序执行,或者Ajax调用之后的代码在响应后执行?

提前致谢。

function validate(){
    var comma_regex = /^\w(\s*,?\s*\w)*$/,
        alpha_regex = /^[a-zA-Z ]*$/,
        email_reg_exp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ ;

    var email = document.getElementById("email").value,
        other_indus = document.getElementById("other_indus").value,
        other_sub_indus = document.getElementById("other_sub_indus").value,
        other_stage = document.getElementById("other_stage").value;

    var  flagvalue = 0 ;

    if((email !=='')){
      if(!email_reg_exp.test(email)){
        $('#email').css('border', 'solid 1px red');
        $('#email_span').html('<h5 style="color:red;font-size:10px">Please enter a valid Email ID </h5>');

        flagvalue = 1;

      }else{
        $.ajax({
          url : "investor_email_check",
          type: "POST",
          data : 'email='+email,

          success: function(data){
            if(data == '1'){ // failure: data already exists

              $('#email').css('border', 'solid 1px red');
              $('#email_span').html('<h5 style="color:red;font-size:10px">Email ID is already registered </h5>');

              flagvalue = 1 ;

            } else {
              $('#email').css('border', '1px solid #ccc');
              $('#email_span').html('');
            }
          }
        });

      }    
    } else {
      $('#email').css('border', 'solid 1px red');
      $('#email_span').html('<h5 style="color:red;font-size:10px">Please enter a  Email ID </h5>');

      flagvalue = 1 ;
    }



     if((other_indus != '')&& !(comma_regex.test(other_indus))){
       $('#other_indus').css('border', 'solid 1px red');
       $('#other_indus_span').html('<h5 style="color:red;font-size:10px">Please enter a valid format</h5>');

       flagvalue = 1 ;
     } else {
       $('#other_indus').css('border', '1px solid #ccc');
       $('#other_indus_span').html('');
     }

     if((other_sub_indus != '')&& !(comma_regex.test(other_sub_indus))){
       $('#other_sub_indus').css('border', 'solid 1px red');
       $('#other_sub_indus_span').html('<h5 style="color:red;font-size:10px">Please enter a valid format</h5>');

       flagvalue = 1 ;
     } else {
       $('#other_sub_indus').css('border', '1px solid #ccc');
       $('#other_sub_indus_span').html('');
     }

     if((other_stage != '')&& !(comma_regex.test(other_stage))){
       $('#other_stage').css('border', 'solid 1px red');
       $('#other_stage_span').html('<h5 style="color:red;font-size:10px">Please enter a valid format</h5>');

       flagvalue = 1 ;
     } else {
       $('#other_stage').css('border', '1px solid #ccc');
       $('#other_stage_span').html('');
     }

     if(flagvalue == 1){
       return false;
     } else {
       return true ;
     }  
   }

2 个答案:

答案 0 :(得分:-1)

如果您使用的是jQuery,请尝试使用

{{1}}

答案 1 :(得分:-2)

添加<form onsubmit="return validate()">,强制表单运行JS并在提交的基础上完成提交或从函数返回。如果函数返回true,那么它将提交表单,否则表单将不会提交