如果通過jQuery插入表單值，如何驗證表單輸入字段？

Question

視圖：

<script>
    $(function(){
        $( "#insert" ).click(function(event)
        {
            event.preventDefault();

            var name= $("#name").val();
            var email= $("#email").val();
            var phone= $("#phone").val();
            var message= $("#message").val();
            $.ajax(
                {
                    type:"post",
                    url: "<?php echo base_url('index.php/'); ?>test/register",
                    data:{"name": name, "email":email, "phone":phone, "message":message},
                    success:function(data)
                    {
                        console.log(data);
                        $('#msd').text('Your Enquiry Has Been Sent. We Will Inform You Soon.');
                        $('#name,#email,#message,#phone').val('');
                    }
                });
        });
    });
</script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title" id="myModalLabel">Header</h4>
            </div>
            <div class="modal-body" id="bg-image">
                <div class="row">
                    <div class="col-md-6">
                        <form method="post" enctype="multipart/form-data">
                            <input type="text" class="form-control1" id="name" name="name" placeholder="Enter Your Name" required>

                            <input type="text" class="form-control1" id="email" name="email" placeholder="Enter Your Email Id" required>

                            <input type="text" class="form-control1" id="phone" name="phone" placeholder="Enter Your Phone" required>

                            <textarea class="form-control1" name="message" id="message"  placeholder="Enter Your Message" required></textarea>
                            <input type="submit" name="insert" id="insert" value="Submit">
                        </form>
                    </div>
                    <div class="col-md-6">
                      <h4>Features</h4>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <h4>Fotter</h4>
            </div>
        </div>
    </div>
</div>

控制器：

public function register()
{
    $register  = $this->Fetch_data->contact();
    if(!empty($register_user))
    {
        return true;
    }
    else
    {
        return false;
    }
}

楷模：

public function contact()
  {
     $data = array(
        'name'  => $this->input->post('name'),
        'email' => $this->input->post('email'),
        'phone' => $this->input->post('phone'),
        'message' => $this->input->post('message'),
        's_date' => date('Y-m-d')
     );
     $this->db->insert('contact', $data);
  }

在這段代碼中，我在模態內部創建了一個表單，在其中將表單值插入數據庫表名稱聯系人。 在這里，表單值已成功插入，但驗證無法正常進行。 如果輸入字段為空，它們什么也不顯示，這是必填字段。 那么，我們如何才能對所有領域進行驗證，請幫助我？

謝謝

Answer 1

嘗試這個

將<script>替換為

<script>
    $(function(){
        $( "#insert").click(function(event)
        {
            event.preventDefault();

            var name= $("#name").val();
            var email= $("#email").val();
            var phone= $("#phone").val();
            var message= $("#message").val();
            $.ajax(
                {
                    type:"post",
                    url: "<?php echo base_url('index.php/'); ?>test/register",
                    dataType:'JSON',
                    data:{"name": name, "email":email, "phone":phone, "message":message},
                    success:function(data)
                    {
                        console.log(data);
                        $('#msd').text(data.message);
                    }
                });
        });
    });
</script>

控制者

public function register()
   {
      $this->load->library('form_validation');
      $post = $this->input->post();

      if (!empty($post)) {

//validate form input
         $this->form_validation->set_rules('name', 'Name', 'required');
         $this->form_validation->set_rules('email', 'E-mail', 'required');
         $this->form_validation->set_rules('phone', 'Phone', 'required');
         $this->form_validation->set_rules('message', 'Message', 'required');

         if ($this->form_validation->run() == true) {
            $register = $this->Fetch_data->contact($post);
            if (!empty($register)) {

               echo json_encode(array("status" => false, "message" => "Inserted Successfully"));
               exit(0);
            } else {
               echo json_encode(array("status" => false, "message" => "Unable to insert Try later"));
               exit(0);
            }
         } else {
            echo json_encode(array("status" => false, "message" => validation_errors()));
            exit(0);
         }
      } else {
         echo json_encode(array("status" => false, "message" => "Invalid Request"));
         exit(0);
      }
   }

模型

public function contact($post)
   {
      $data = array(
                               'name' => $post['name'],
                               'email' => $post['email'],
                               'phone' => $post['phone'],
                               'message' => $post['message'],
                               's_date' => date('Y-m-d', time())
      );
      $this->db->insert('contact', $data);
      return $this->db->insert_id();
   }

如果您有任何錯誤，請通知我

注意

注意：啟用Form_validation庫