如何在動態構建的html元素中使用CodeIgniters表單驗證？

Question

我在這里描述了問題，但我意識到我需要一個人解決一個問題，這個問題必須首先解決。 我將在“聯系我們”表格中使用一個簡單的示例。

我有一個控制器：

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');
            }

        }

並查看：

<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>

如果我使用url呼叫控制器，則可以正常聯系我們。 但是，我很煩惱，必須在新頁面中加載“聯系我們”這樣的小東西。 所以我的主頁視圖中有這個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>

因此，現在我已經在主視圖中“嵌入”了與我們聯系的控制器。 但是，我顯示表單並在表單驗證運行時實際發送電子郵件。 但是，如果表單驗證未運行，則會加載一個新頁面，顯示具有驗證錯誤的相同表單。 我想在彈出div中顯示驗證錯誤。

我已經在許多網站上看到了此操作，但是無法理解如何使用CI進行操作。 每次提交后我都必須打電話給聯絡人控制器嗎？ 我認為問題在於$ .get僅被調用一次，因此回調僅處理一次響應。 我試圖刪除$('#contact-link').on('click',function(){部分，但我沒有幫助。即使將$ .get放入函數中並使其遞歸，我還是擔心會搞亂表單驗證。

Answer 1

您需要的是jquery驗證，並使用ajax發送聯系人數據。

這是您的操作方法：在主視圖中，當用戶單擊該鏈接時，將顯示一個包含聯系人表單的隱藏div或隱藏的引導程序模版，該模版會與該聯系人表單一起顯示。 在這里，您需要一個jquery驗證插件，用於在單擊“提交”時檢查用戶輸入，如果用戶輸入正確填寫，則將ajax請求發送到運行form_validation方法的聯系控制器內的方法，如果表單提交成功，發送電子郵件，並返回答復說聯系成功。 然后，如果成功建立了聯系，則關閉模式，並顯示一條通知，指出成功建立了聯系。

您的聯系人控制器將如下所示：

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

因為我認為這是創建良好用戶界面的好方法，所以我將回答我自己的問題供其他人使用。

問題是我的JS請求控制器單擊聯系人鏈接，但從不處理提交。

我保留了原樣，但添加了另一個JS：

$('#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);
    });
});

在我看來，我改變了：

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

沒有event.preventDefault(); 控制器將驗證並繼續執行流程，直到調用load->view並在新頁面中打開該視圖為止。