Question

我目前有一个表单，我希望实现表单验证。我使用代码点火器框架。

当我点击提交表单按钮时，表单不会提交，而是弹出一个模态窗口，其中包含用户刚刚输入的信息（有点像确认他们输入了正确的详细信息。）当用户在模态窗口中单击“确定”时，表单将通过ajax提交，并弹出另一个模式窗口以确认表单已提交。

我要做的是在弹出第一个模态窗口之前验证表单，但我似乎无法找到一种方法。有谁知道我怎么能这样做？

这是我的表格：

<?php if(isset($error)){
echo "<i>" . $error . "</i>";
}?>
<form id ="form1" name ="form1">
    <div class="hospital_container">
        <h3 class = "hospital_header"><b>Enter Hospital Information</b></h3>

    <label for="hospitalName"  id ="hospLabel" class = "labelForm">Name:</label>
    <input type="text" class = "input2" id="hospitalName" name="hospitalName" class = "newUserForm">

        <button type="button"  id = "hospital_submit_button" class = "hospital_submit_button" data-toggle="modal" data-target="#userModal">Add New Hospital</button> // triggers the modal window but I want to run form validation before this.

    </div>
</form>

Ajax for submit：

     $(function() {
//#overlaysubclass2 is the name of the submit button in the modal window
            $("#overlaysubclass2").on("click", function(event) {
                event.preventDefault();
                var DataString=$("#form1").serialize()
                $.ajax({
                    url: "<?php echo base_url(); ?>index.php/Admin/createHospital",
                    type: "post",
                    data:DataString ,
                    success: function(data) {

                        $("#userModal").modal('hide'); // hide the original modal and show the confirmation modal
                        $("#confirmModal").modal('show');
                    }


                });
            });
        });

我的控制器：

 function createHospital(){
    $this->load->library('form_validation');

    $this->form_validation->set_rules('hospitalName', 'hospitalName', 'required');
  //  $this->form_validation->set_rules('hospAddress', 'hospAddress', 'required');


    if ($this->form_validation->run() === FALSE) {
        $data['error'] = 'Please fill in the form';
        $this->load->view('includes/admin/header');
       $this->load->view('newHospital');

    }else {
        $data = array(

            'hospitalName' => $this->input->post('hospitalName'),
        );

        $this->user_model->create_hospital($data);
      //$data['message'] = 'Data Inserted Successfully';
        $this->load->view('newHospital');
    }
}

表格验证实际上并未运行，但允许我提交空白表格

我非常感谢任何帮助，因为我真的卡住了！

Answer 1

＆＃34;表单验证实际上并未运行，但允许我提交一份空白表格＆＃34;实际上你不知道你的验证是否正常运行。

首先，您需要将响应（从ajax调用到：createHospital方法）：

$("#confirmModal").html(data);  // this line put your response html to '#confirmModal' dom elem.
$("#confirmModal").modal('show');

第二个更好的选择：

$("#overlaysubclass2").on("click", function(event) {

是：

$("#form1").on("submit", function(event) {

或：

$("#hospital_submit_button").on("click", function(event) {

打开模态窗口

1 个答案: