動的に構築されたhtml要素でCodeIgnitersフォーム検証を使用するには？

Question

私はhereと書かれた問題を持っていますが、私は1つ1つの問題に取り組む必要があることを認識しました。私はContact Usフォームで少し簡単な例を使用します。私は私がうまく形成ご連絡作業を取得URLを使用してコントローラを呼び出す場合

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <?php echo form_open('contact'); ?> 

      <div class="form-group"> 
       <label for="name">Full name</label></br> 
       <input type="text" class="form-control" name="name" placeholder="Enter your full name" value="<?php echo set_value('name') ?>" ></br> 
       <?php echo form_error('name'); ?> 
      </div> 

      <div class="form-group"> 
       <label for="email">Email</label></br> 
       <input type="text" class="form-control" name="email" placeholder="Enter your email" value="<?php echo set_value('email') ?>"></br> 
       <?php echo form_error('email'); ?> 
      </div> 

      <div class="form-group"> 
       <label for="subject">Subject</label></br> 
       <input type="text" class="form-control" name="subject" placeholder="subject" value="<?php echo set_value('subject') ?>"></br> 
       <?php echo form_error('subject'); ?> 
      </div> 

      <div class="form-group"> 
       <label for="msg">Message</label></br> 
       <textarea rows="4" class="form-control" type="text" name="msg" placeholder="Enter your message"><?php echo set_value('msg') ?></textarea></br> 
       <?php echo form_error('msg'); ?> 
      </div> 

      <input type="submit" class="btn btn-default" name="submit" value="send" /> 

      </form> 
     </div> 
    </div> 
</div> 

：

class Contact extends CI_Controller { 

     public function __construct() 
     { 
      [...] 
     } 

     public function index() 
     { 
      $this->form_validation->set_rules('name', 'Full name', 'trim|required'); 
      $this->form_validation->set_rules('email', 'Your email', 'trim|required|valid_email'); 
      $this->form_validation->set_rules('subject', 'Subject', 'trim|required'); 
      $this->form_validation->set_rules('msg', 'Message', 'trim|required'); 

      $this->form_validation->set_error_delimiters('<div class="text-danger">', '</div>'); 

      if($this->form_validation->run() == FALSE) 
      { 
       $this->load->view('contact', $data); 
      } 
      else 
      { 
       // Configure email library 
       [...] 
       $this->email->send(); 

       $this->load->view('contact_success'); 
      } 

     } 

とビュー：

私は、コントローラを持っています。しかし私は、Contact Usのような小さなことが新しいページにロードされなければならないと迷惑をかける。だから私は私のメインページビューでこのjqueryを持っています：

[..] 
<a href="#" id="contact-link">register</a> 
[..] 
<script> 
$(document).ready(function(){ 
    $('#contact-link').on('click',function(){ 
     $.get(baseurl + 'index.php/contact', function(response){ 
      $('#popup-div').html(response); 
     }); 
    }); 
}); 
</script> 

これで私のメインビューに連絡先のコントローラが埋め込まれました。しかし、私はフォームを表示し、フォーム検証が実行されると実際に電子メールを送信します。しかし、フォームの検証が実行されない場合、新しいページが読み込まれ、検証エラーが発生した同じフォームが表示されます。ポップアップディビジョンに検証エラーが表示されます。

これは多くのウェブサイトで行われていることがわかりましたが、CIでどのように行うかについて頭を悩ますことはできません。提出するたびに連絡先担当者に連絡する必要がありますか？問題は、$ .getが一度だけ呼び出されるため、コールバックが応答を1回しか処理しないということです。私は$('#contact-link').on('click',function(){部分を削除しようとしましたが、私は助けません。私は関数の中に$ .getを入れて再帰的にすることについては言いますが、フォームの検証を乱す恐れがあります。

Answer 1

jqueryの検証とajaxを使用した連絡先データの送信が必要です。 メインビューでは、ユーザーがその連絡先をクリックすると連絡フォームを含む非表示のdivまたは非表示のブートストラップモーダルが表示されます。このリンクをクリックすると、連絡先フォームが表示されます。 ここから、submitをクリックするとユーザーの入力をチェックするjqueryバリデーション・プラグインが必要です。ユーザーの入力が正しく入力された場合、form_validationメソッドを実行するContact Controller内のメソッドにajaxリクエストを送信します。電子メールを送信し、連絡が成功したという応答を返します。 連絡が成功した場合は、モーダルを閉じて、連絡が成功したという通知を表示します。

public function check_contact() 
    { 
     $this->form_validation->set_rules('name', 'Full name', 'trim|required'); 
     $this->form_validation->set_rules('email', 'Your email', 'trim|required|valid_email'); 
     $this->form_validation->set_rules('subject', 'Subject', 'trim|required'); 
     $this->form_validation->set_rules('msg', 'Message', 'trim|required'); 

     if($this->form_validation->run() == FALSE) 
     { 
      $response = "KO"; 
      echo $response; 
     } 
     else 
     { 
      // Configure email library 
      $this->email->send(); 
      $response = "OK" 
      echo $response; 
     } 

    } 

そして、あなたのjqueryのAJAXはこのようなものになります：

//Fetch the contact form using id="ContactForm" 
var form = $('#ContactForm')[0]; 
var formData = new FormData(form); 
$.ajax({ 
    url: 'Your url here/check_contact', 
    data: formData, 
    type: 'POST', 
    success : function(data){ 
    if (data == "KO") 
     { 
     $('#ErrorDiv').html("There was an error subbmiting your contact").show(); 
     } 
    if (data == "OK") 
     { 
     $('#ContactModal').hide(); 
     $('#SuccessDiv').delay(800).fadeIn(); 
     } 
    } 
}); 

jQueryの検証プラグイン：https://jqueryvalidation.org/

Answer 2

を

あなた接触コントローラは次のようになります私はこれが本当にいいと思うのでw良いユーザーインターフェイスを作成するために私は自分自身の質問に答えてくれます。

問題は、私のJSがcontact-linkをクリックしてコントローラに要求しても、送信を処理しないことです。

$('#contact-form').on('submit', function(event) { 
    event.preventDefault(); 
    var formData = $(this).serialize(); 
    var actionUrl = $(this).attr('action'); 
    $.post(actionUrl, formData, function(response){ 
     $('#popup-div').html(response); 
    }); 
}); 

と私の見解では、私は変更：event.preventDefault();なければ

<?php echo form_open('contact', array('id'=>'contact-form')); ?> 

コントローラが検証だろうとload->viewが呼び出されるまでの流れを継続

は、私はそれがあったが、別のJSを追加していることを左そのビューは新しいページで開かれます。