2017-07-26 60 views
0

我已经在Ci中提交了一个将数据提交给Db的表单。我一直在尝试实施验证的形式,例如名称:超过3 +字母,电子邮件'@'等AJAX中的验证表格Codeigniter

我永远不可能使它的工作,尝试使用jquery验证与不同的来源,表单基本上提交没有验证,任何指向我要去哪里错了?

下面的代码只是一个没有任何验证码附加到它的片段。

<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">&times;</button> 
       <h4 class="modal-title">Enquire About "<?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 is 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> 

控制器

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

模型

function form_insert($user_data){ 
    $this->db->insert('pp_enquiry', $user_data); 
} 

** **验证

function checkForm() { 
// Fetching values from all input fields and 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 be blanks. 
if (name == '' || email == '' || mobile == '') { 
alert("Fill All Fields"); 
} else { 
//Notifying error fields 
var username1 = document.getElementById("username"); 
var email1 = document.getElementById("email"); 
var mobile = document.getElementById("mobile"); 
//Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then Generate alert. 
if (username1.innerHTML == 'Must be 3+ letters' || email1.innerHTML == 'Invalid email' || mobile.innerHTML == 'Invalid website') { 
alert("Fill Valid Information"); 
} else { 
//Submit Form When All values are valid. 
document.getElementById("myForm").submit(); 
} 
} 
} 
// AJAX code to check input field values when onblur event triggerd. 
function validate(field, query) { 
var xmlhttp; 
if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp = new XMLHttpRequest(); 
} else { // for 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> the page."; 
} 
} 
xmlhttp.open("GET", "validation.php?field=" + field + "&query=" + query, false); 
xmlhttp.send(); 
} 
+0

哪里是jQuery的表单验证码?你提到的规则在哪里?例如姓名:超过3+字母,电子邮件'@'等'? –

+0

添加了编辑@HimanshuUpadhyay –

回答

0

请点击这里是你上面的代码工作的例子。我想你错过了你的代码中的东西。

$(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">&times;</button> 
 
       <h4 class="modal-title">Enquire About "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 is 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>

+0

Shyam,这个解决方案就像一个魅力!非常感谢你!我意识到我通过调用Jquery和验证两次使事情变得更糟。 –

+0

但是,我试图用原始的替换AJAX形式的网址,验证工作,但表单不提交,它只是一个死的点击。 Chrome XHR显示输入数据的全部4个字段。 –

+0

什么是您的原始URL? –

0

你可以找到下面提到的解决方案。

PHP验证

$this->form_validation->set_rules('name', 'Your name', 'trim|required|strip_all_tags|min_length[3]'); 
$this->form_validation->set_rules('email', 'Email', 'trim|required|strip_all_tags|valid_email|min_length[3]'); 
$this->form_validation->set_rules('mobile', 'Mobile', 'trim|required|strip_all_tags|min_length[10]|max_length[12]'); 

if ($this->form_validation->run() == FALSE) { 
    $data['status'] = false; 
    $data['error'] = validation_errors(); 
} else { 
    $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['status'] = true; 
    $data['message'] = 'Data Inserted Successfully'; 
} 
echo json_encode($data); 

jQuery验证

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

$(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 = '<?php echo site_url('enquiry/ajax_post_form') ?>'; 
      var data = $("#reg_form").serialize(); 
      $.ajax({ 
       url: url, 
       type: 'POST', 
       data: data, 
       dataType: 'json', 
       beforeSend: function() { 
        // Code if required before Send 
       }, 
       success: function(returnData) { 
        if (returnData.status) { 
         $('.ajax_success').html('Enquiry Submitted Successfully!'); 
        } 
       } 
      }); 
     } 
    }); 
}); 

让我知道,如果它不工作。

+0

我设法合并此代码,这看起来很有前途,但是当我尝试插入到字段中时,它不验证,它不发送请求。它只是在我按下提交后停留在那里,没有发布成功消息。 –

+0

@ZeehanAkhtarMohammed:请检查我的更新回答,并让我知道如果您有任何错误 –

+0

Same Issue Shyam,是否有任何方法从Chrome进行调试以查看点击提交按钮时会发生什么,导致我的Chrome控制台空白 –