i have problem with validate submit button.
so here my code:
var handleValidation = function() {
var form = $('#form-date');
var error = $('.alert-danger', form);
var success = $('.alert-success', form);
form.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "", // validate all fields including form hidden input
rules: {
start: {
required: true,
date: true,
remote: {
url: "<?php echo site_url('activity/check_date')?>",
type: "post",
data: {
start: function(){ return $("#date").val(); }
}
}
},
end: {
required: true,
date: true,
remote: {
url: "<?php echo site_url('activity/check_end')?>",
type: "post",
data: {
end: function(){ return $("#end").val(); }
}
}
},
},
messages: {
start:
{
remote: 'Date already in use.'
},
end:
{
remote: 'Date already in use.'
},
},
invalidHandler: function (event, validator) { //display error alert on form submit
success.hide();
error.show();
App.scrollTo(error, -200);
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},
unhighlight: function (element) { // revert the change done by hightlight
$(element)
.closest('.form-group').removeClass('has-error'); // set error class to the control group
},
success: function (label) {
label
.closest('.form-group').removeClass('has-error'); // set success class to the control group
},
submitHandler: function (form) {
success.show();
error.hide();
form[0].submit(); // submit the form
}
});
}
<form class="form-horizontal" id="form-date" role="form" method="post" action="<?php echo base_url(); ?>activity/add">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
<div class="alert alert-success display-hide">
<button class="close" data-close="alert"></button>
Your form validation is successful!
</div>
<input type="hidden" class="form-control" name="nik" value="<?php echo $this->session->userdata('nik')?>">
<div class="form-group">
<label class="col-sm-3 control-label">Start Date:<span
class="required">*</span> </label>
<div class="col-sm-7">
<div class="input-group date date-picker" data-date-format="yyyy-mm-dd">
<input type="text" class="form-control" readonly id="date" name="start" required>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">End Date:<span
class="required">*</span> </label>
<div class="col-sm-7">
<div class="input-group date date-picker" data-date-format="yyyy-mm-dd">
<input type="text" class="form-control" readonly id="end" name="end" required>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-5">
<button type="submit" class="btn green">
<i class="fa fa-pencil"></i> Create</button>
<button type="button" class="btn default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
i have validate where data is empty show warning,but if data succesful.only show warning success and didn't redirect.in console error show
form[0].submit is not a function(…)
so where is wrong code.
how to resolve it?
Just change :
form[0].submit();
To
form.submit();
The form argument of submitHandler() is the dom element not a jQuery object and per plugin docs should be submitted using native submit
Related
Ok so i'm trying to use jQuery Validation to validate my form inside modal. However, my jQuery Validation doesn't even fire at all, not even an error. I already used the debug, and there's a warning:
Nothing selected, can't validate, returning nothing.
These are my codes:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Form Add Question Category</h4>
</div>
<form id="form_input" method="post" action="">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<input type="hidden" id="submit_type" name="submit_type" value="address_insert"/>
<div class="form-group">
<div class="col-md-6 col-sm-12 col-xs-12">
<label for="txtDeviceID">Device ID</label>
<input type="text" class="form-control" id="txtDeviceID" name="txtDeviceID" placeholder="Device ID"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<label for="txtPassword">Password</label>
<input type="text" class="form-control" id="txtPassword" name="txtPassword" placeholder="Password"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-12 col-xs-12">
<label>Employee</label>
<select class="select2_employee" name="select2_employee" style="width:100%"></select>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-12 col-xs-12">
<label>Branch</label>
<select class="select2_branch" name="select2_branch" style="width:100%"></select>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtIPLocal">IP Local</label>
<input type="text" class="form-control" id="txtIPLocal" name="txtIPLocal" placeholder="IP Local"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtPortLocal">Port Local</label>
<input type="text" class="form-control" id="txtPortLocal" name="txtPortLocal" placeholder="Port Local" />
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtIPPublic">IP Public</label>
<input type="text" class="form-control" id="txtIPPublic" name="txtIPPublic" placeholder="IP Public"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtPortPublic">Port Public</label>
<input type="text" class="form-control" id="txtPortPublic" name="txtPortPublic" placeholder="Port Public"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtIPAlternative">IP Alternative</label>
<input type="text" class="form-control" id="txtIPAlternative" name="txtIPAlternative" placeholder="IP Alternative"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label for="txtPortAlternative">Port Alternative</label>
<input type="text" class="form-control" id="txtPortAlternative" name="txtPortAlternative" placeholder="Port Alternative"/>
<div class="error_validation" style="color:red; font-size:9px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" value='Submit' class="btn btn-md btn-primary" >Submit</button>
<button type="button" class="btn btn-md btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
The javascript:
var validate_start = $("#myModal #form_input").validate({
debug: true,
ignore: [],
rules: {
txtDeviceID: {
required: true
// lettersOnlySpace: true,
// minlength: 5,
// maxlength: 15
},
txtPassword: {
required: true
},
select2_employee: {
required: true
},
select2_branch: {
required: true
},
txtIPLocal: {
required: true
},
txtPortLocal: {
required: true,
number: true,
range: [1, 65535]
},
txtIPPublic: {
required: true
},
txtPortPublic: {
required: true,
number: true,
range: [1, 65535]
},
txtIPAlternative: {
required: true
},
txtPortAlternative: {
required: true,
number: true,
range: [1, 65535]
}
},
// messages: {
// txtDeviceID: {
// required: "Input required."
// },
// txtPassword: {
// required: "Input required."
// },
// select2_employee: {
// required: "Input required."
// },
// select2_branch: {
// required: "Input required."
// },
// txtIPLocal: {
// required: "Input required."
// },
// txtPortLocal: {
// required: "Input required."
// },
// txtIPPublic: {
// required: "Input required."
// },
// txtPortPublic: {
// required: "Input required."
// },
// txtIPAlternative: {
// required: "Input required."
// },
// txtPortAlternative: {
// required: "Input required."
// }
// },
errorPlacement: function (error, element) {
console.log("validate success!");
error.appendTo(element.siblings('.error_validation'));
},
submitHandler: function (form) {
console.log(form);
// $.ajax({
// url: $("#submit_type").val(),
// type: 'POST',
// dataType: 'JSON',
// data: function (params) {
// console.log("parameter");
// console.log(params);
// return JSON.stringify($(form).serialize());
// },
// // data: $(form).serialize(),
// success: function () {
// // $(form).html("<div id='message'></div>");
// // $('#message').html("<h2>Your request is on the way!</h2>")
// // .append("<p>someone</p>")
// // .hide()
// // .fadeIn(1500, function () {
// // $('#message').append("<img id='checkmark' src='images/ok.png' />");
// // });
// }
// });
return false; // required to block normal submit since you used ajax
},
invalidHandler: function (event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
console.log("error " + errors);
}
});
I've already tried many solution, from fixing the form inside modal body, use the unobstrusive library, but it still doesn't want to fire. Please help me, one lead to trigger the validation is enough, i will follow afterwards.
Thankyou.
Try to init the validation code right after the modal is shown. If you have something like $('#myModal').open(), then you have to init the validation after the open method. I believe it is something related to the DOM manipulation.
When I am calling submithandler in validation rules, I want to call post function to submit the form but it's not firing.
Below is my code
$(function() {
$.validator.addMethod("time", function(value, element) {
return this.optional(element) || /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(value);
}, "Please enter a valid time (24 Hour Format).");
//^(([0-1]?[0-2])|([2][0-3])):([0-5]?[0-9])(a|p)m?$ 12 hour
// /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i 24 hour
// alert($(#isNoOfExecutionSet").val());
jQuery.validator.setDefaults({
highlight: function(element) {
jQuery(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
jQuery(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'label label-danger',
errorPlacement: function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$('#form').validate({
rules: {
full_name: {
required: true,
minlength: 3,
maxlength: 100
// email: true
},
short_name: {
required: true,
minlength: 3,
maxlength: 100
// number: true
// email: true
},
password: {
required: true,
minlength: 3,
maxlength: 100
// number: true
// email: true
},
total_branches: {
required: true,
number: true
// email: true
},
confirm: {
equalTo: "#password"
},
submitHandler: function(form) {
alert('jj');
}
}
});
}); // end of function
below is my html code
<div class="container">
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
<h2> Institute Info</h2>
<form role="form" method="post" id="form">
<hr class="colorgraph">
<p style="color:#f0776c;float:left" id="msg"></p>
<div class="form-group">
<input type="text" class="form-control input-lg" id="full_name" name="full_name" type="full_name" value="saljdf" placeholder="Enter Full Name">
</div>
<div class="form-group">
<input type="tet" class="form-control input-lg" id="short_name" name="short_name" type="short_name" value="saljdf" placeholder="Enter Short Name">
</div>
<div class="form-group">
<input type="number" class="form-control input-lg" id="total_branches" name="total_branches" value="12" type="total_branches" placeholder="Enter Total Branches Allowed">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="password" name="password" type="password" value="123" placeholder="Enter Password">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="confirm" name="confirm" type="password" value="saljdf" placeholder="Confirm Password">
</div>
<div class="form-group">
<select class="form-control" id="status" name="status">
<option value="Active" >Active</option>
<option value="Non-Active" >Non-Active</option>
</select>
</div>
<hr class="colorgraph">
<div class="row">
<!--<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>-->
<div class="col-xs-12 "><button type="submit" class="btn btn-lg btn-primary btn-block" name="btnsave" value="btnsave" id="btnsave">Create Institute</button></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
You mean ajax call i.e jquery post method.
You can write ajax call withun function and whenever your form valiate successfully call the same ajax function from that loop/conditional statement.
Like.
function myFunction(){
// JQuery post method i.e Ajax call
}
$("form"). submit(function(){
// validation cade
if(validate){
myFunction();
}
});
This is no exact code, I just try to suggest the solution it works for me in many projects you can try.
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.
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.
I use jquery validation plugin to do validation in a bootstrap modal form, when i send the form ,the jquery validation plugin is not working also the form cannot send out.
bootstrap modal form
<div class="modal fade" id="form-content" 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-hidden="true">
×
</button>
<h3>send message</h3>
</div>
<div class="modal-body">
<form class="contact">
<fieldset>
<div class="modal-body">
<ul class="nav nav-list">
<div class="form-group">
<label for="topic" class="control-label ">topic:</label>
<input class="form-control" type="text" name="topic">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="ruser" class="control-label ">ruser: </label>
<input class="form-control" type="text" name="ruser">
<span class="help-block"></span>
</div>
<div class="form-group">
<label for="content" class="control-label ">content:</label>
<textarea class="form-control" name="content" rows="3"></textarea>
<span class="help-block"></span>
</div>
</ul>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit">send</button>
close
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<button class="btn btn-success btn-lg" data-toggle="modal"
data-target="#form-content">
send message
</button>
javascript
$(document).ready(function(){
$('form').validate({
rules: {
topic: {
required: true
},
ruser: {
required: true
},
content: {
required: true
}
},
messages : {
topic: {
required: 'enter topic'
},
ruser: {
required: 'enter ruser'
},
content: {
required: 'enter content'
}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
submitHandler: function (form) {
alert('valid form submission'); // for demo
$.ajax({
type: "POST",
url: "process.php",
data: $('form.contact').serialize(),
success: function(msg){
if(msg=='no'){
alert(msg);
}
else if(msg=='ok!'){
alert(msg);
location.reload()
}
},
error: function(){
alert("failure");
}
});
return false;
}
});
});
How can i fix the problem?
The jsfiddle
The problem is the submit button is not a descendant of the form you are trying to submit.
One possible solution is to write a click handler for the button, and call the form submit from there like
<div class="modal-footer">
<button class="btn btn-success" id="submitcontact">send</button>
close
</div>
then
$('#submitcontact').click(function(){
$('form.contact').submit();
})
Demo: Fiddle
Firstly, As your Jquery code has one error:
On line no. 40 :- } replace with },
And solution is to call a function on onclick event of your button. No need to remove type="submit" as it's removed in Arun's answer.
Inside $(document).ready(function() write below function:
$('#sendForm').click(function(){
$('form.contact').submit();
})
And it will work. WOKRING DEMO