how to validate form input field if form value inserted through jquery?

Question

view:

<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>

controller:

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

models:

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);
  }

In this code I have create a form inside the modal where I am inserting form value into database table name contact. Here, form value are inserting successfully but the validation are not working properly. If input field empty they show nothing like field is mandatory. So, How can we give validation to all field please help me ?

Thank You

You should have validation at front-end as well as the back-end — mrid
– mrid, Commented Sep 9, 2017 at 7:50
I have already given required to all input field but they are also not working why? — omkara
– omkara, Commented Sep 9, 2017 at 7:54
You can validate using jQuery at the client side, and PHP server side (just in case, a user disables javascript in his/her browser) — Samuel Asor
– Samuel Asor, Commented Sep 9, 2017 at 7:54

Vijay Sharma · Accepted Answer · 2017-09-10 03:58:54Z

Try This

Replace <script> To

<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>

Controller

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);
      }
   }

Model

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();
   }

If You got any error then let me know

Note

Note : Enable Form_validation library

Collectives™ on Stack Overflow

how to validate form input field if form value inserted through jquery?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related