I am using codeigniter.In my view file i have a form and i use bootstrap validator to check field validation.Bootstrap validator validationg form field correctly.But the problem is that i am working with codeigniter.The function is written in controller.After form submitted it should redirect on function which is written in controller.Here i am facing problem when i click on submit button after successfull validation it did not perform any action.It does not redirect on Controller where new function is writtern,How i redirect page after successfull validation.I am using javascript not using ajax.
Here is my code of View file:
<form class="" data-toggle="validator" role="form" id="sms_form" method="Post" action="<?php echo site_url('SMS/sendIndividualMsg/'.$row->pro_id)?>">
<div class="col-md-12">
<div class="form-group">
<label for ="message"><strong>Message</strong></label>
<textarea class="form-control" id="comment_body" name="message" placeholder=" Your Message"></textarea>
</div>
<div>
<?php echo form_submit(['name' => 'submit' ,'class' => 'btn btn-default' , 'value' => 'Send Message']); ?>
</div>
</div>
</form>
Here is my code of bootstrap validator:
<script>
$('#sms_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
message:{
validators: {
regexp: {
regexp: /^[a-zA-Z0-9_\.\s]+$/,
message: 'The message can only consist of alphabetical, number, dot and underscore'
},
notEmpty: {
message: 'Please supply your message'
}
}
}
}
});
</script>
Here is my code of controller.This is function where i want redirection:
public function sendIndividualMsg($pro_id)
{
}
Use this..
<script> $('#sms_form').bootstrapValidator({ // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { message:{ validators: { regexp: { regexp: /^[a-zA-Z0-9_\.\s]+$/, message: 'The message can only consist of alphabetical, number, dot and underscore' }, notEmpty: { message: 'Please supply your message' } } } } .on('success.field.fv', function(e, data) { $( "form" ).submit(); }); }); </script>
Wasn't this a fun one to play with.
Long story Short.
You need to have your JS After you load your jquery.js file ( which is all part of your Bootstrap js files). Your current JS works.
You also need it after the bootstrapValidator.js ,if you don't, you will need to wrap your js in...
$(document).ready(function () {
// JS Code here if this is rendered before bootstrapValidator.min.js
})
The trick here is to watch the console messages in your Browsers Developer tools...
Just saying, it don't work, without looking at the console messages won't be helpful.
If you have no clue as to what I am on about I'll clarify it later.
UPDATE: This is the test code I used to investigate your issue.
Test View - views/form_validator_view.php
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<div class="container">
<form class="" data-toggle="validator" role="form" id="sms_form" method="Post" action="<?php echo site_url('sms/sendIndividualMsg/' . 1) ?>">
<div class="form-group">
<label for="message"><strong>Message</strong></label>
<div class="col-md-12">
<textarea class="form-control" id="message" name="message" placeholder=" Your Message"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="//oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
<script>
$(document).ready(function () {
// JS Code here if this is rendered before bootstrapValidator.min.js
})
// $(document).ready(function () {
$('#sms_form').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
message: {
validators: {
regexp: {
regexp: /^[a-zA-Z0-9_\.\s]+$/,
message: 'The message can only consist of alphabetical, number, dot and underscore'
},
notEmpty: {
message: 'Please supply your message'
}
}
}
}
});
// })
</script>
</body>
</html>
Test Controller - controllers/Sms.php
<?php
class Sms extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->helper('url');
$this->load->helper('form');
}
public function index() {
$this->load->view('form_validator_view');
}
public function sendIndividualMsg($id) {
echo "The ID is $id";
var_dump($_POST);
}
}