如何在动态构建的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并在新页面中打开该视图为止。