在 onsubmit 表单中调用 ajax 函数

Question

我正在使用 html 表单并使用 php 提交，但在提交之前我想使用 ajax 方法来验证和检查响应，如果响应为真则 return true else return false 所以直到检查响应 html 表单不应该被提交但是没有检查响应也表单被提交即使我使用 return

<form  method="POST" action="<?= base_url('save_details/')?>" onsubmit="return validate()">

<button type="submit">Add</button>
                                                
</form>

脚本

function validate(){
$.ajax({
                type: "POST",
                url: "<?= base_url('validate_email') ?>",
                data: {
                    email: email,
                 
                },
                dataType: 'json',
                success: function (response)
                {
                  if (response.status) {
                        return true;
                    } else {
                        return false;
                        // some message
                    }
                }
            });
}

Answer 1

您遇到的第一个问题是您需要阻止标准表单提交，以便您的逻辑在允许发送请求之前等待 AJAX 请求。为此，您可以使用不显眼的事件处理程序。理想情况下，这些应该始终用于 HTML 中的内联 on* 事件属性，因为后者不再是好的做法。

第二个问题是由于异步请求，您的 return 语句实际上不会提供对 validate() 调用的响应。您需要使用异步模式来允许请求完成并根据响应执行操作。

最后，您可以提出 AJAX 请求，如果响应状态符合您要求的规则，则直接重新提交表单。试试这个：

<form method="POST" action="<?= base_url('save_details/')?>" data-emailvalidationurl="<?= base_url('validate_email') ?>">
  <!-- form form controls ... -->
  <button type="submit">Add</button>
</form>

jQuery($ => {
  $('form').on('submit', e => {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: e.target.dataset.emailvalidationurl,
      data: { email: email },
      dataType: 'json',
      success: function(response) {
        if (response.status) {
          e.target.submit(); // rule met, allow form submission
        } else {
          console.log('Denied...');
          // show message to user here...
        }
      }
    });
  });
});

另请注意，我将电子邮件验证 URL 放在 HTML 的数据属性中。其原因与 on* 事件属性是不良做法的原因相同 - 关注点分离。您应该注意在您的 .js 文件中除了 Javascript 之外没有任何代码。

在 onsubmit 表单中调用 ajax 函数

call ajax function in onsubmit form

javascript

php

jquery

ajax

formvalidation-plugin