如果通过 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 库