根据ajax响应提交表单

Question

我创建了一个表单。在提交表单时，我发出一个 ajax 请求，告诉我数据是否有效。我想要做的是，如果 ajax 响应告诉数据是有效的，那么它应该提交表单，但如果数据无效，那么它不应该提交表单。

$('#agentLogin').submit(function(ev){
       ev.preventDefault();
       var username=$('#agentEmail').val();
       var password=$('#agentPassword').val();
       $.ajax({
           url: '<?php echo $this->createAbsoluteUrl('site/agentLogin'); ?>',
           type: 'POST',
           data: {
               email: username,
               pwd: password
           },
           success: function(data){
               if(data === 'invalid'){
                   $('#agentLoginStatus').html('Invalid Username and password');
               }else if(data === 'deactivated'){
                   $('#agentLoginStatus').html('Account is deactivated');
               }else if(data === 'valid'){
                   // submit form here
               }
           }
       });
    });

问题：-当数据无效时不提交表单。但如果数据有效，那么它也不会提交表单。我该如何解决这个问题？

已经尝试过：-

$(this).submit();
return true;

Answer 1

试试这个方法：

$('#agentLogin').submit(function (ev, submit) {

    if (!submit) {

        ev.preventDefault();

        var username = $('#agentEmail').val(),
            password = $('#agentPassword').val(),
            $form = $(this);

        $.ajax({
            url: 'url',
            type: 'POST',
            data: {
                email: username,
                pwd: password
            },
            success: function (data) {
                if (data === 'invalid') {
                    $('#agentLoginStatus').html('Invalid Username and password');
                }
                else if (data === 'deactivated') {
                    $('#agentLoginStatus').html('Account is deactivated');
                }
                else if (data === 'valid') {
                    $form.trigger('submit', [true]);
                }
            }
        });
    }
});

它不适用于您的原始代码的原因是，当您尝试调用 $(this).submit() 时，它会触发相同的事件处理程序，该处理程序会再次尝试使用 AJAX 请求进行验证，并且从未真正提交过表单。要修复它，您需要以某种方式告诉事件处理程序，当您手动提交表单时，您不想再运行验证。我为此传递了额外的参数：

$form.trigger('submit', [true]);

Answer 2

您可以继续使用native .submit() method 提交<form>，这应该是only start the default action 之前被阻止的without rerunning event bindings。

submit() 方法在调用时，必须 submit 来自 form 元素本身的 form 元素，并设置 从submit() 方法提交 标志。

5) 如果从submit() 方法提交 标志未设置，则fire a simple event 冒泡并可取消，命名为submit，在form . [...]

不过，您还需要存储对 <form> 的引用，因为 this 可以而且通常会在 functions 之间有所不同，包括嵌入式回调。

$('#agentLogin').submit(function(ev){
   ev.preventDefault();
   var form = this; // store reference as `this` can change between `function`s
   var username=$('#agentEmail').val();
   var password=$('#agentPassword').val();
   $.ajax({
       url: '<?php echo $this->createAbsoluteUrl('site/agentLogin'); ?>',
       type: 'POST',
       data: {
           email: username,
           pwd: password
       },
       success: function(data){
           if(data === 'invalid'){
               $('#agentLoginStatus').html('Invalid Username and password');
           }else if(data === 'deactivated'){
               $('#agentLoginStatus').html('Account is deactivated');
           }else if(data === 'valid'){
               form.submit(); // use native method to counter `preventDefault()`
           }
       }
   });
});

Answer 3

$('#agentLogin').submit(function(ev){
   var myForm=$(this);
   if(myForm.data("action")=="submit"){
    return true;
   }
   ev.preventDefault();
   var username=$('#agentEmail').val();
   var password=$('#agentPassword').val();
    $.ajax({
       url: '<?php echo $this->createAbsoluteUrl('site/agentLogin'); ?>',
       type: 'POST',
       data: {
           email: username,
           pwd: password
       },
    success: function(data){
           if(data === 'invalid'){
               $('#agentLoginStatus').html('Invalid Username and password');
               return false;
           }else if(data === 'deactivated'){
               $('#agentLoginStatus').html('Account is deactivated');
           }else if(data === 'valid'){
               myForm.data("action","submit");
               myForm.submit();
           }
       }

 });

Answer 4

这里我们可以使用ajax的submithandler。原因是提交处理程序与提交按钮一起使用并验证数据。..