Question

当点击提交按钮时，我想验证表格，并在ajax调用中想要检查验证码是否正确。如果它不正确则需要错误信息并阻止表单提交。

这是我的javascript代码

$(document).on("click","#submit-reservation",function(e){
    if($('#myform').isValid()){

      var cval = $('#captcha-input').val();
      var dataString = 'captachacheck=true&cval='+cval;
      $.ajax({
        type: "POST",
        url: "{/literal}{$smarty.session.siteloc}reservation/checkcaptcha/{literal}",
        data: dataString,
        cache: false,
        success: function (data) {
          console.log(data.status);
          if(data.status == "error"){
            $("#captcha-wrap").append('<span class="help-block form-error" style="color: red;"> * Invalid Captcha</span>');
             e.preventDefault();
          }
          else{
           $('#submit-reservation').click();
          }


        }
      });

    }


  });

Answer 1

我想在你的表单中，你有提交按钮声明为： -

<input type="submit" id="submit-reservation">

即使你添加了事件处理程序，ajax调用也是异步的，因此e.preventDefault不会工作，因为表单会一直提交到那时。

使用

<button id="submit-reservation">Submit</button>
<input type="submit" id="submitForm" hidden>

在ajax电话中： -

      if(data.status == "error"){
        $("#captcha-wrap").append('<span class="help-block form-error" style="color: red;"> * Invalid Captcha</span>');

      }
      else{
       $('#submitForm').trigger("click");
      }

如果您的通话没有返回任何错误，则会触发此事件

Answer 2

使用submit触发提交，将阻止功能放在ajax之外

$(document).on("click","#submit-reservation",function(e){
    e.preventDefault();
    if($('#myform').isValid()){

      var cval = $('#captcha-input').val();
      var dataString = 'captachacheck=true&cval='+cval;
      $.ajax({
        type: "POST",
        url: "{/literal}{$smarty.session.siteloc}reservation/checkcaptcha/{literal}",
        data: dataString,
        cache: false,
        success: function (data) {
          console.log(data.status);
          if(data.status == "error"){
            $("#captcha-wrap").append('<span class="help-block form-error" style="color: red;"> * Invalid Captcha</span>');

          }
          else{
           $('#submit-reservation').closest('form').submit();
          }


        }
      });

    }


  });

在javascript表单提交中未采用e.preventDefault（）函数

2 个答案: