Develop Reference

codeigniter popup model validation using jjavascript

how to validation using javascript popup model in codeigniter
login code shown in below
below code shown in login page i am trying so many times ways for validation but i am not getting
<form id="register-form" action="<?php echo base_url(); ?>Index.php/Login_cntrl/login" method="POST" >
<div class="field-wrap">
<label class="view-label">Email Address</label>
<input type="email" placeholder="Email Address" name="email" id="email" class="input-control" value=""/>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" name="password" id="password" value="" />
<a href="javascript:void(0)" class="btn btn-link btn-nobg" id="btn-show-forgot" >Forgot ?</a>
</div>
<div class="field-wrap">
<button type="submit" class="btn btn-submit" name="ulogin" id="ulogin" value="ulogin" >Login</button>
</div>
<div class="field-wrap">
NEW User? Sign up
</div>
</form>
validation.js
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/validation.js"></script>
$(function() {
$("#register-form").validate({
// Specify the validation rules
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
maxlength: 8
}
},
// Specify the validation error messages
messages: {
email: "Please enter your email",
password: "Please enter your password",
},
submitHandler: function(form) {
form.ulogin();
}
});
});

The JavaScript code below is working.
$(function() {
// Setup form validation on the #register-form element
$("#btn-show-forgot").validate({
//ignore: [],
// Specify the validation rules
rules: {
email: {
required: true,
email: true
}
},
// Specify the validation error messages
messages: {
email: "Please enter your firstname",
},
submitHandler: function(form) {
form.submit();
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://formvalidation.io/bundles/0a3b9034e109d88d72f83c9e6c9d13b7.js"></script>
<form id="contactForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="fullName" />
</div>
<div class="col-xs-5 messageContainer"></div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Email</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="email" />
</div>
<div class="col-xs-5 messageContainer"></div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Title</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="title" />
</div>
<div class="col-xs-5 messageContainer"></div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Content</label>
<div class="col-xs-4">
<textarea class="form-control" name="content" rows="5"></textarea>
</div>
<div class="col-xs-5 messageContainer"></div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#contactForm').formValidation({
framework: 'bootstrap',
err: {
container: function($field, validator) {
// Look at the markup
// <div class="col-xs-4">
// <field>
// </div>
// <div class="col-xs-5 messageContainer"></div>
return $field.parent().next('.messageContainer');
}
},
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullName: {
validators: {
notEmpty: {
message: 'The full name is required and cannot be empty'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and cannot be empty'
},
emailAddress: {
message: 'The email address is not valid'
}
}
},
title: {
validators: {
notEmpty: {
message: 'The title is required and cannot be empty'
},
stringLength: {
max: 100,
message: 'The title must be less than 100 characters long'
}
}
},
content: {
validators: {
notEmpty: {
message: 'The content is required and cannot be empty'
},
stringLength: {
max: 500,
message: 'The content must be less than 500 characters long'
}
}
}
}
});
});
</script>
or check this link
http://formvalidation.io/examples/showing-message-custom-area/callback/bootstrap.html
According to my form i have done modifications, but it's not working and let me know if something went wrong
<script>
$(document).ready(function() {
$('#contactForm').formValidation({
framework: 'bootstrap',
err: {
container: function($field, validator) {
// Look at the markup
// <div class="col-xs-4">
// <field>
// </div>
// <div class="col-xs-5 messageContainer"></div>
return $field.parent().next('.messageContainer');
}
},
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:
email: {
validators: {
notEmpty: {
message: 'The email address is required and cannot be empty'
}
}
}
}
});
</script>

Why form validations are not working with jquery.validation.js?

I'm trying out a new plugin which is called jquery.validation.js and it seems that after I try to apply them it doesn't work. Can someone kindly help me on this?
Here's the page.html
<form id="CustomerForm" class="form-horizontal group-border stripped" name="CustomerDetails">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Customer Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" ng-model="CusDetails.cname" class="form-control" name="cname" id="cname"/>
</div>
</div>
<!--end of .form-group-->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Company Name</label>
<div class="col-lg-10 col-md-9">
<input type="text" ng-model="CusDetails.comname" class="form-control" name="comname"id="comname" />
</div>
</div>
<!--end of .form-group-->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Telephone Number</label>
<div class="col-lg-10 col-md-9">
<div class="input-group input-icon">
<span class="input-group-addon"><i class="fa fa-phone s16"></i></span>
<input ng-model="CusDetails.tel" class="form-control" name="ctel" type="text" placeholder="(999) 999-9999" id="ctel">
</div>
</div>
</div>
<!-- End .form-group -->
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Email address</label>
<div class="col-lg-10 col-md-9">
<input ng-model="CusDetails.email" type="email" class="form-control" name="email" placeholder="someone#example.com" id="email">
</div>
</div>
<!-- End .form-group -->
</form>
div class="row">
<div class="col-md-1"></div>
<div class="col-lg-9 col-sm-9 col-xs-12">
<button name="btnSubmit" type="submit" ng-click="AddCustomer()" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button>
<button type="submit" id="cancel" class="btn btn-default pad">Cancel</button>
</div>
</div>
Here's what the angular.controller.js looks
function AddCustomerController($scope, $location, $rootScope, $http, CustService) {
(function initController() {
})();
$scope.AddCustomer = function () {
var CustomerDetails = {
cname: $scope.CusDetails.cname,
comname: $scope.CusDetails.comname,
tel: $scope.CusDetails.tel,
email: $scope.CusDetails.email
};
CustService.Customer(CustomerDetails, function (res) {
console.log(res);
$.extend($.gritter.options, {
position: 'bottom-right',
});
if (res.data == 'success') {
$.gritter.add({
title: 'Success!',
text: 'Successfully added the new customer ' + '<h4><span class="label label-primary">' + CustomerDetails.cname + '</span></h4>',
time: '',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-ok-circle',
class_name: 'success-notice'
});
$scope.CusDetails = {};
}
else {
$.gritter.add({
title: 'Failed!',
text: 'Failed to add a new customer. Please retry.',
time: '',
close_icon: 'l-arrows-remove s16',
icon: 'glyphicon glyphicon-remove-circle',
class_name: 'error-notice'
});
}
});
}
}
And finally the validation.js for validating above form
$(document).ready(function () {
$("#CustomerDetails").validate({
debug:true,
errorPlacement: function (error, element) {
var place = element.closest('.input-group');
if (!place.get(0)) {
place = element;
}
if (error.text() !== '') {
place.after(error);
}
},
errorClass: 'help-block',
rules: {
cname: {
required: true,
},
comname: {
required: true
},
ctel: {
required: true,
min: 10
},
email: {
required: true,
email: true
}
},
messages: {
cname: {
required: "Please enter customer name!"
},
comname: {
required: "Please enter company name!"
},
ctel: {
required: "Please enter telephone number",
minlength: "Telephone number should be atleast 10 digits"
}
},
highlight: function (label) {
$(label).closest('.form-group').removeClass('has-success').addClass('has-error');
},
success: function (label) {
$(label).closest('.form-group').removeClass('has-error');
label.remove();
}
});
});
The error from debuggging from the built in function in validation says:
Nothing selected, can't validate, returning nothing.
What am I doing wrong? Why isn't the validation.js isn't getting called?
Help would be greatly appreciated.

FormValidation on modal bootstrap

I have a modal as so
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="page-title">
Add Movie
<small>Note fields marked with <span style="color:red">*</span> are required</small>
</h2>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="NewMovie">
<div class="form-group">
<label class="control-label col-sm-4" for="prefix">
Title <span style="color:red">*</span>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="Title" name="Title" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="prefix">
Classification <span style="color:red">*</span>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="Classification" name="Classification" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="prefix">
Rating <span style="color:red">*</span>
</label>
<div class="col-sm-6">
<input id="Rating" name="Rating" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0" /> <span id="rate" style="margin-left:5%">0 / 5</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="prefix">
Release Date <span style="color:red">*</span>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="ReleaseDate" name="ReleaseDate" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="prefix">
Cast <span style="color:red">*</span>
</label>
<div class="col-sm-5">
<input type="text" class="form-control col-sm-5" id="Cast" />
</div>
<div class="col-sm-1">
<button type="button" id="btnNewCast" class="btn btn-default">+</button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="prefix"></label>
<div class="col-sm-6" id="newCast">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnAddMovie" data-dismiss="modal">Save</button>
</div>
</div>
</div>
When btnAddMovie is clicked I ajax / jquery method is called which calls a method in my controller. But before I submit I would like to validate the fields they have entered.
I am following this Form validation on bootstrap modal
I have declared my implementation as follows:
$(document).ready(function() {
$('#NewMovie').formValidation({
framework: 'bootstrap',
excluded: [':disabled'],
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Title: {
validators: {
notEmpty: {
message: 'The Title is required'
}
}
}
}
});
});
My ajax method is as follows:
$("#btnAddMovie").click(function () {
var stringArr = $('span[data-id="cast[]"]').map(function () {
return $(this).text().trim();
}).get();
$.ajax({
url: '/Movies/Add',
traditional: true,
data: { "Title": $("#Title").val(), "Classification": $("#Classification").val(), "Rating": $("#Rating").val(), "ReleaseDate": $("#ReleaseDate").val(), "Cast": stringArr },
cache: false,
type: "POST",
success: function (result) {
if (result.success) {
}
},
error: function (result) {
alert("Error");
}
});
});
But for some reason when ever click the button on my form it automatically posts back without doing the validation?
I'm trying to validate and depending on if its true or false then perform the relevant action.

About your button, either you have to change it to a submit button or use the button setting to indicate which button should trigger the validation (see bellow)
button: {
// The submit buttons selector
selector: '#btnAddMovie'
}
you have to delete data-dismiss="modal" from your button
And then trigger the success.form.fv event and call your ajax method there, see following code:
$('#NewMovie').formValidation({
framework: 'bootstrap',
excluded: [':disabled'],
// ...
icon: {
// ...
},
fields: {
// ...
}
})
.on('success.form.fv', function(e) {
// Prevent form submission
e.preventDefault();
// And then
// Place your Ajax call here
var stringArr = $('span[data-id="cast[]"]').map(function () {
return $(this).text().trim();
}).get();
$.ajax({
url: '/Movies/Add',
traditional: true,
data: { "Title": $("#Title").val(), "Classification": $("#Classification").val(), "Rating": $("#Rating").val(), "ReleaseDate": $("#ReleaseDate").val(), "Cast": stringArr },
cache: false,
type: "POST",
success: function (result) {
if (result.success) {
}
},
error: function (result) {
alert("Error");
}
});
// And then close your modal
$('#MyModal').modal('hide');
});
# References:
form events docs: http://formvalidation.io/settings/#event-form
button setting docs: http://formvalidation.io/settings/#form-button

If you remove your ajax call, does the validation work?
Maybe you should take a look at your submit button :
<button type="button" class="btn btn-default" id="btnAddMovie" data-dismiss="modal">Save</button>
which is not a submit button.
If you look to the example in the page you gave us, you can see that the submit button's code is
<button type="submit" class="btn btn-primary">Login</button>
Try to change this and it would be nice if you could provide us a JSFiddle
Hope it's gonna help you a bit.

JQuery Validation Modal Issues

I am new to coding and am wracking my brain on this and hope you can help. I am having a bit of trouble solving my registration page. I am using JQuery validation and a Modal within the page. I had my validation working correctly but can't seem to get it working with the modal. What is wrong with my validation coding What am I missing here to keep it from working?
<!doctype html>
<html>
<head>
<script src="/Root/JS/jquery-1.11.2.js"></script>
<script src="/Root/JS/bootstrap.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"
type="text/javascript"></script>
<script src="/Root/JS/contactus-form.js"></script>
<link href="/Root/CSS/newstyle.css" rel="stylesheet" type="text/css">
<link href="/Root/CSS/bootstrap/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/Root/CSS/bootstrap/bootstrap-theme.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="signIn" 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">×</span></button>
<h1 class="modal-title" id="myModalLabel">Registration</h1>
</div> <!-- close modal header -->
<div class="modal-body">
<div id="formWrap" >
<form id="contactform" name='test' class="form-horizontal contactus" method="post" action='' accept-charset='UTF-8'>
<p><label class="error control-label">* Required Field.</label></p>
<div class="form-group">
<label class="col-xs-3 control-label">Full name<span class="error">*</span></label>
<div class="col-xs-4" id="firstname">
<input type="text" class="form-control" name="firstname" placeholder="First Name"/>
</div>
<div class="col-xs-4" id="lastname">
<input type="text" class="form-control" name="lastname" placeholder="Last Name"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Address</label>
<div class="col-xs-4" id="address">
<input type="text" class="form-control" name="address" placeholder="Address"/>
</div>
<div class="col-xs-4" id="address2">
<input type="text" class="form-control" name="address2" placeholder="Address (2)"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label"></label>
<div class="col-xs-3" id="city">
<input type="text" class="form-control" name="city" placeholder="City"/>
</div>
<div class="col-xs-2" id="state">
<select class="form-control" name="state"/>
<option>IN</option>
<option>AL</option>
<option>AR</option>
<option>AZ</option>
<option>CA</option>
<option>CO</option>
<option>CT</option>
<option>DE</option>
<option>FL</option>
<option>GA</option>
<option>IA</option>
<option>ID</option>
<option>IL</option>
<option>KS</option>
<option>KY</option>
<option>LA</option>
<option>MA</option>
<option>MD</option>
<option>ME</option>
<option>MI</option>
<option>MN</option>
<option>MO</option>
<option>MS</option>
<option>MT</option>
<option>NC</option>
<option>ND</option>
<option>NE</option>
<option>NH</option>
<option>NJ</option>
<option>NM</option>
<option>NV</option>
<option>NY</option>
<option>OH</option>
<option>OK</option>
<option>OR</option>
<option>PA</option>
<option>RI</option>
<option>SC</option>
<option>SD</option>
<option>TN</option>
<option>TX</option>
<option>UT</option>
<option>VA</option>
<option>VT</option>
<option>WA</option>
<option>WI</option>
<option>WV</option>
<option>WY</option>
</select>
</div>
<div class="col-xs-3" id="zip">
<input type="text" class="form-control" name="zip" placeholder="Zip Code"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Phone number<span class="error">*</span></label>
<div class="col-xs-3" id="cell">
<input type="text" class="form-control" name="cell" placeholder="cell"/>
</div>
<div class="col-xs-3" id="home">
<input type="text" class="form-control" name="home" placeholder="home"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Email address<span class="error">*</span></label>
<div class="col-xs-5" id="email">
<input type="email" class="form-control" name="email"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password<span class="error">*</span></label>
<div class="col-xs-5" id="password">
<input type="password" class="form-control" name="password"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Confirm Password<span class="error">*</span></label>
<div class="col-xs-5" id="passwordconfirm">
<input type="password" class="form-control" name="passwordconfirm"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Real Estate Interest<span class="error">*</span></label>
<div class="col-xs-5">
<div class="checkbox" id="realestate">
<label><input type="checkbox" value="Purchase"/>Purchase</label>
<label><input type="checkbox" value="Sell" />Sell</label>
<label><input type="checkbox" value="Rent" />Rent</label>
<br>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 g-recaptcha" data-sitekey="###"></div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" id="contactbtn" class="btn btn-primary" name="register" value="Submit">Submit</button>
</div>
</div>
</form>
<script>
$("#contactform").validate();
</script>
</div> <!--close formWrap -->
</div> <!--close modal-body-->
</div><!-- close modal content -->
</div><!-- close modal-dialog -->
</div> <!-- close modal-fade -->
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" id="register" data-toggle="modal" data-target="#signIn">Register Here</button>
</div><!-- end .content -->
</div><!-- end .container -->
</body>
</html>
This is my for my contactus-form.js as listed in the html.
//Form Validation for Modal
$().ready(function(){
$("#contactform").validate({
rules: {
firstname: "required",
lastname: "required",
cell: {
required: true,
minlength: 10,
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6,
maxlength: 32
},
passwordconfirm: {
required: true,
minlength: 6,
maxlength: 32,
equalTo: "#password"
},
realestate: {
required: true,
rangelength: [1,3]
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter last name",
cell: {
required: "Please enter a cell number",
minlength: "Please include area code",
},
password: {
required: "Please enter a password",
minlength: "Password must be between 6 and 32 characters", maxlength: "Password must be between 6 and 32 characters"
},
passwordconfirm: {
required: "Please re-enter password",
minlength: "Password must be between 6 and 32 characters",
maxlength: "Password must be between 6 and 32 characters",
equalTo: "Password confirm does not email the password"
},
realestate:{
required: "Please select at least one"
},
}
}
});
});

I noticed you are using validation on same form more then one time. In this situation only the first call will take effect multiple jquery validators on one form which in your case is $("#contactform").validate(); and second one will be ignored.

Removing some of your rules, but leaving the structure intact, we can see the problem...
$().ready(function(){
$("#contactform").validate({
rules: {
// .... other rules clipped
realestate: {
required: true,
rangelength: [1,3]
},
messages: {
// .... other rules clipped
realestate:{
required: "Please select at least one"
},
}
}
});
});
You've put the messages option inside of the rules option, thereby breaking the plugin.
Within the .validate() method, messages is supposed to be a sibling of rules.
Should look like this...
$(document).ready(function(){
$("#contactform").validate({
rules: {
// .... other rules
realestate: {
required: true,
rangelength: [1,3]
}
}, // <- close 'rules' option
messages: {
// .... other rules
realestate:{
required: "Please select at least one"
}
} // <- close 'messages' option
});
});
You should also fix your DOM ready handler. $().ready(function(){... is "not recommended" as per the jQuery documentation.
As already stated in the other answer, you cannot call $("#contactform").validate(...) more than once on the same form. It does not matter that one is in the HTML. Only the first instance is used to initialize the plugin and all subsequent instances will be ignored. If you made a mistake in posting your OP, then edit it so that we can rule that out as the root cause.

bootstrapValidator ajax request, prevent closing bootstrap modal after submitting

hi im using bootstrapValidator to validate my form and i have no idea where to add ajax request after validating form. and also want to prevent closing bootstrap modal after submitting the form. i referred similar questions and still couldn't make it work.
here is my bootstrap modal
<a href="#"class="btn btn-lg btn-black ico-windows" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#AddAlbum" > Create New Album </a>
<!-- Modal -->
<div class="modal fade" id="AddAlbum" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Create New Album</h4>
</div>
<div class="modal-body">
<div id="formregister">
<form action="" class="form-horizontal" role="form" id="newAlbum" >
<p class="qc-errmsg" style="display: none;"> </p>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Album Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" name="albumName" placeholder="Album Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label" >Description</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3" name="description"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" onclick="send()" value="cart" class="btn btn-primary">Save Changes</button>
</div>
</div>
</form>
</div> <!-- form register -->
<div id="successfulpost" style="font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #ff0000; display: none;">
<p class="jst-txt"><span>Thank you,</span> for showing your Interest !!</p>
<p class="jst-txt">Our property advisor shall get in touch with you very shortly..</p>
</div>
</div> <!-- model body-->
</div>
</div>
</div>
here is my javascript
$(document).ready(function () {
//validations
$('#newAlbum').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: {
albumName: {
message: 'The Album Name is not valid',
validators: {
notEmpty: {
message: 'The Album Name is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The Album Name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'The Album Name can only consist of alphabetical and number'
}
},
//form.submit();
}
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
url: "add_album.php",
type: "POST",
success: function () {
alert('done');
$('#newAlbum').hide();
$('#successfulpost').show();
}
});
});
i made a jsbin for this
http://jsbin.com/xatog/8/edit?html,js,output

You are using version 0.5.3. They have removed the submithandler option and added an event success.form.bv.
$(form)
.bootstrapValidator(options)
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
var $form = $(e.target),
validator = $form.data('bootstrapValidator'),
submitButton = validator.getSubmitButton();
// Do whatever you want here ...
});
source here
Fiddle here