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 の送信 + シームレスなファイルのアップロード) を 2 か月間探していましたが、ようやく息ができるようになりました。皆様のご支援を決して忘れません。これが私にとってどれほど意味があるか、あなたには決してわからないでしょう。

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のイベントではなくフォームのイベントにハンドラーをバインドして返すと、送信が妨げられますclickfalseform

$('#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 に答える