1

概述

以下是我想要发生的事情：

1. User answers the form, clicks submit
2. The data will be evaluated by the CodeIgniter `validate_new_account()`
     a. If there are errors, prevent submission so that the dynamically added fields will not disappear
     b. If successful / no error validation, proceed to the **else** part of `validate_new_account()` to `$this->view_preview_form( $this->get_post_data() );`

我有一个表格，我将它提交给我的控制器的validate_new_account()功能：

function validate_new_account() 
{
    // validations here 

    if ( $this->form_validation->run() == FALSE ) {
    // JSON-encoded validations
        $errors = json_encode( $this->form_validation->error_array() );
        echo $errors;
    } else {
        // next step
    $this->view_preview_form( $this->get_post_data() );
    }
}

我使用jQuery Form Plugin与控制器进行交互。

var options = {
    url: "<?php echo site_url('new_account/validate_new_account'); ?>",
    type: 'POST',
    dataType: 'json',
    success: function(data) {

      if (data.length === 0) {
        alert('Form successfully submitted!');
      } else {
        // echo validation errors from CodeIgniter
        alert("Some fields weren't answered successfully. Please answer them.");
        $.each(data, function(key, value){
          var container = '<div class="error">'+value+'</div>';
          $('.form-element input[name="'+key+'"]').after(container);
        });

      }

    }
};

$('#main-submit').click(function(e) {
  $('#main-form').valid();
  $('#main-form').ajaxSubmit(options);  
  e.preventDefault();
});

问题

如果没有我的 ajax 函数，上面的代码可以完美运行，但是我动态添加了需要 ajax 处理所有验证的元素，否则这些元素将消失（糟糕的 UX）。

因此，如果我启用并使用我的 ajax 函数，来自 CodeIgniter 的验证错误会以我想要的方式打印出来（通过 ajax 的成功部分）但是如果所有验证现在都正确，则表单不会转到$this->view_preview_form( $this->get_post_data() );.

为什么会这样？我一直在寻找类似的问题，但遗憾的是没有一个与我的情况相似。

e.preventDefault()如果表格发送成功，如何通过？

感觉

对于所有帮助我解决这个问题的人，可能是评论或答案，非常感谢。我一直在寻找这个解决方案（CodeIgniter 验证 + jQuery 验证 + AJAX 提交 + 无缝文件上传）两个月，现在我终于可以喘口气了。我永远不会忘记你所有的帮助。你永远不会知道这对我意味着什么。

4

2 回答 2

1

简单：

<script>
    $('form').on('submit', function(e) {
        // do your AJAX validation here
        var url = $(this).attr('action');
        var params = $(this).serialize();
        $.post(url, params, function(response) {
            if (response.errors.length > 0) {
                e.preventDefault();
            }
        });
    });
</script>

如果返回的错误不止一个，这将阻止表单提交。否则，事件将照常进行并传播。

于 2013-02-18T14:43:21.613 回答
0

我认为在验证后你想阻止表单提交，以防止页面被重新加载。如果这就是你想要的，那么试试这个

将处理程序绑定到submit表单的click事件而不是按钮的事件并返回false，这将阻止form提交

$('#main-form').on('submit', function () {

    $(this).valid(); // do your validation here
    $(this).ajaxSubmit(options); // then call the ajax function

    return false;
});
于 2013-02-18T14:33:22.963 回答