Question

我有问题here，但我意识到我需要一个解决一个问题，而这个问题必须是第一个问题。我将使用联系我们表格中的一些简单示例。

我有一个控制器：

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>

所以现在我已经＆＃34;嵌入＆＃34;在我的主视图中联系我们控制器。但是，我会在表单验证运行时显示表单并实际发送电子邮件。但是如果表单验证没有运行，则加载新页面，显示具有验证错误的相同表单。我想在我的弹出窗口中显示验证错误。

我已经在很多网站上看到了这一点，但无法理解如何使用CI。每次提交后我都必须致电联系控制员吗？我认为问题是$ .get只被调用一次，所以回调只处理一次响应。我试图删除$('#contact-link').on('click',function(){部分，但我没有帮助。我甚至将$ .get放在一个函数中并使其递归，但我担心它会弄乱表单验证。

Answer 1

您需要的是jquery验证，并使用ajax发送联系人数据。

以下是如何做到这一点：在主视图中，有一个隐藏的div或隐藏的bootstrap模式，其中包含联系人表单，当用户单击该模式与联系表单一起显示的链接时。从这里你需要一个jquery验证插件，用于在点击提交时检查用户输入，如果用户输入正确填充，则向运行form_validation方法的联系人控制器内的方法发送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

我认为这是创建良好用户界面的好方法，我会回答我自己的问题供其他人使用。

问题是我的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并在新页面中打开该视图。

如何在动态构建的html元素中使用CodeIgniters表单验证？

2 个答案: