php - Validation in AJAX Form Codeigniter -
i've made form in ci submits data db. i've been trying implement validation in form, eg name : more 3+ letters, email '@' etc.
i never seem make work, tried using jquery validation different sources , form submits without validation, pointers i'm going wrong?
the code below snippet without validation codes attached it.
<button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#enquire">enquire</button> <div class="modal fade" id="enquire"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">enquire "<?php echo $row_company->company_name; ?> "</h4> </div> <div class="modal-body"> <form name="reg_form" id="reg_form"> <div class="form-group"> <div class="input-group <?php echo (form_error('name')) ? 'has-error' : ''; ?>"> <label class="input-group">your name <span>*</span></label> <input name="username" type="text" class="form-control" id="name" placeholder="full name" required="required" data-error="name required." maxlength="40"> <?php echo form_error('name'); ?> </div> <div class="input-group <?php echo (form_error('email')) ? 'has-error' : ''; ?>"> <label class="input-group">email <span>*</span></label> <input name="email" type="text" class="form-control" id="email" placeholder="valid email id" required="required" maxlength="50"> <?php echo form_error('email'); ?> </div> <div class="input-group <?php echo (form_error('mobile')) ? 'has-error' : ''; ?>"> <label class="input-group">mobile number <span>*</span></label> <input name="mobile" type="text" class="form-control" id="mobile" placeholder="mobile" required="required" maxlength="50"> <?php echo form_error('mobile'); ?> </div> </div> <input type="hidden" name="college" value='<?php echo $row_company->company_name; ?>'> <p> <input id="click_form" value="submit" type="button" ></p> </form> <div class="ajax_success"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#click_form').click(function () { var url = "<?php echo site_url('enquiry/ajax_post_form') ?>"; var data = $("#reg_form").serialize(); $.post(url, data, function (data) { $('.ajax_success').html('enquiry submitted successfully!'); }, "json"); }); }); </script> </div> </div> </div> </div> controller
public function ajax_post_form() { $this->form_validation->set_rules('name', 'your name', 'trim|required|strip_all_tags'); $this->form_validation->set_rules('email', 'email', 'trim|required|strip_all_tags'); $this->form_validation->set_rules('mobile', 'mobile', 'trim|required|strip_all_tags'); $user_data = array( 'name' => $this->input->post('username'), 'email' => $this->input->post('email'), 'mobile' => $this->input->post('mobile'), 'college' => $this->input->post('college') ); $this->insert_model->form_insert($user_data); $data['message'] = 'data inserted successfully'; echo json_encode($user_data); } model
function form_insert($user_data){ $this->db->insert('pp_enquiry', $user_data); } **validation **
function checkform() { // fetching values input fields , storing them in variables. var name = document.getelementbyid("username1").value; var email = document.getelementbyid("email1").value; var mobile = document.getelementbyid("mobile").value; //check input fields should not blanks. if (name == '' || email == '' || mobile == '') { alert("fill fields"); } else { //notifying error fields var username1 = document.getelementbyid("username"); var email1 = document.getelementbyid("email"); var mobile = document.getelementbyid("mobile"); //check values/informations filled user valid or not.if fields invalid generate alert. if (username1.innerhtml == 'must 3+ letters' || email1.innerhtml == 'invalid email' || mobile.innerhtml == 'invalid website') { alert("fill valid information"); } else { //submit form when values valid. document.getelementbyid("myform").submit(); } } } // ajax code check input field values when onblur event triggerd. function validate(field, query) { var xmlhttp; if (window.xmlhttprequest) { // ie7+, firefox, chrome, opera, safari xmlhttp = new xmlhttprequest(); } else { // ie6, ie5 xmlhttp = new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate != 4 && xmlhttp.status == 200) { document.getelementbyid(field).innerhtml = "validating.."; } else if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { document.getelementbyid(field).innerhtml = xmlhttp.responsetext; } else { document.getelementbyid(field).innerhtml = "error occurred. <a href='index.php'>reload or try again</a> page."; } } xmlhttp.open("get", "validation.php?field=" + field + "&query=" + query, false); xmlhttp.send(); }
please check here working example of above code. think missed in code.
$(document).ready(function() { var $validator = $("#reg_form").validate({ rules: { name: {required: true, minlength: 3, maxlength: 25}, email: {required: true, email: true, minlength: 3, maxlength: 100, regex: /^[a-za-z0-9_]+\@[a-za-z0-9_]+\.[a-za-z0-9_]+/}, mobile: {required: true, minlength: 10, maxlength: 12, number: true} }, messages: { email: {required: "please enter valid email address"}, mobile: {required: "please provide valid phone or mobile number!"} } }); jquery.validator.addmethod("regex", function(value, element, regexp) { if (regexp.constructor != regexp) regexp = new regexp(regexp); else if (regexp.global) regexp.lastindex = 0; return this.optional(element) || regexp.test(value); }, "please provide valid email address."); $('#click_form').click(function(e) { e.preventdefault(); var $valid = $("#reg_form").valid(); if (!$valid) { $validator.focusinvalid(); return false; } else { var url = 'https://www.example.com'; var data = $("#reg_form").serialize(); $.ajax({ url: url, type: 'post', data: data, datatype: 'json', beforesend: function() { console.log(data); }, success: function(returndata) { if (returndata.status) { $('.ajax_success').html('enquiry submitted successfully!'); } } }); } }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#enquire">enquire</button> <div class="modal fade" id="enquire"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">enquire "company name"</h4> </div> <div class="modal-body"> <form name="reg_form" id="reg_form"> <div class="form-group"> <div class="input-group <?php echo (form_error('name')) ? 'has-error' : ''; ?>"> <label class="input-group">your name <span>*</span></label> <input name="username" type="text" class="form-control" id="name" placeholder="full name" required="required" data-error="name required." maxlength="40"> <?php echo form_error('name'); ?> </div> <div class="input-group <?php echo (form_error('email')) ? 'has-error' : ''; ?>"> <label class="input-group">email <span>*</span></label> <input name="email" type="text" class="form-control" id="email" placeholder="valid email id" required="required" maxlength="50"> <?php echo form_error('email'); ?> </div> <div class="input-group <?php echo (form_error('mobile')) ? 'has-error' : ''; ?>"> <label class="input-group">mobile number <span>*</span></label> <input name="mobile" type="text" class="form-control" id="mobile" placeholder="mobile" required="required" maxlength="50"> <?php echo form_error('mobile'); ?> </div> </div> <input type="hidden" name="college" value='<?php echo $row_company->company_name; ?>'> <p> <input id="click_form" value="submit" type="button" ></p> </form> <div class="ajax_success"></div> </div> </div> </div> </div>
Comments
Post a Comment