Develop Reference

Why JQuery validate.js is not working with Spring Form?

I am trying validation on adding select item using JQuery validate.js in spring form. but validation is happening for only one field and if I submit blank category is submitted. I don't know what is happening wrong here.
I added this jquery files
<!-- JQuery -->
<script src="${js}/jquery.js"></script>
<!-- validate js-->
<script src="${js}/jquery.validate.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="${js}/bootstrap.min.js"></script>
This is my code where I used spring form.
form.jsp
<div class="modal fade" id="myCategoryModal" tabindex="-1"
role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Category</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Category form -->
<sf:form id = "categoryForm" modelAttribute="category"
action="${contextRoot}/manage/category" method="POST" class="">
<div class="form-group row">
<label for="category_name" class="col-sm-4 col-form-label">Category
Name</label>
<div class="col-sm-8">
<sf:input type="text" path="name" class="form-control"
id="category_name" />
</div>
</div>
<div class="form-group row">
<label for="category_description" class="col-sm-4 col-form-label">Category
Description</label>
<div class="col-sm-8">
<sf:textarea type="text" cols="" rows="4" path="description"
class="form-control" id="category_description" />
</div>
</div>
<div class="form-group row">
<div class="offset-sm-4 col-sm-8">
<input type="submit" value="Add Category"
class="btn btn-primary" />
</div>
</div>
</sf:form>
</div>
</div>
</div>
</div>
customjs.js
// validation code for category
var $categoryForm = $('#categoryForm');
if ($categoryForm.length) {
$categoryForm
.validate({
rules : {
name : {
required : true,
minlength : 2
},
description : {
requried : true
}
},
messages : {
name : {
required : 'Please add the category name!',
minlength : 'The category name should not be less than 2 characters'
},
description : {
required : 'Please add a description for this category!'
}
},
errorElement : 'em',
errorPlacement : function(error, element) {
// add the class of help-block
error.addClass('help-block');
// add the error element after the input element
error.insertAfter(element);
}
});
}
// -------------------------
what I am doing wrong here please help me.

Modal Form Validation in Bootstrap

I'm using twitter bootstrap and trying to put validations on my modal form.
Where did I go wrong?
I tried <form role="form"> but it ain't work.
Reserve Product
<div class="modal fade" id="reserveModal" tabindex="-1" role="dialog" aria-labelledby="reserveModal" 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>
<h4 class="modal-title" id="myModalLabel">Reserve Product</h4>
</div>
<div class="modal-body">
<!-- FORM -->
<form id="frm_reserve" name="frm_reserve" class="horizontal">
<fieldset>
<div class="form-group">
<label for="inputRName" class="col-xs-6 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="inputRName" id="inputRName" placeholder="Your Name" data-placement="top" required autofocus>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-xs-6 control-label">Address</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" name="textAddress" id="textAddress" placeholder="Your Address"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputlName" class="col-xs-6 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="inputREmail" id="inputREmail" placeholder="email#you.com" required >
</div>
</div>
<div class="form-group">
<label for="inputlName" class="col-xs-6 control-label">Contact No.</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="inputRContact" id="inputRContact" placeholder="09XX-XXX-XXXX" required >
</div>
</div>
</fieldset>
</form>
My script:
$(document).ready(function() {
$('#reserveModal').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
inputRName: {
validators: {
notEmpty: {
message: 'Your name is required'
}
}
},
textAddress: {
validators: {
notEmpty: {
message: 'Your address is required'
}
}
},
inputREmail: {
validators: {
notEmpty: {
message: 'Your email is required'
}
}
},
inputRContact: {
validators: {
notEmpty: {
message: 'Your contact number is required'
}
}
}
}
});
});
Any help would be much appreciated. I'm open for suggestions too.
ADDED $(document).ready(function() for clarity.

Possible and common reason the validation not working when using formValidation plugin with framework: 'bootstrap' is mostly forget to include bootstrap.js OR bootstrap.min.js which comes with formValidation plugin Where this file is required for formValidation plugin to work with bootstrap framework.
Don't confuse bootstrap(.min).js file provided by the Bootstrap framework with bootstrap(.min).js provided by FormValidation which is placed inside the formvalidation/dist/js/framework directory.
They are two different files and both of them need to be included.
Reference Can be Found Here and Which Libraries to include when using formValidation plugin with bootstrap framework
$(document).ready(function() {
$('#reserveModal').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
inputRName: {
validators: {
notEmpty: {
message: 'Your name is required'
}
}
},
textAddress: {
validators: {
notEmpty: {
message: 'Your address is required'
}
}
},
inputREmail: {
validators: {
notEmpty: {
message: 'Your email is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
inputRContact: {
validators: {
notEmpty: {
message: 'Your contact number is required'
},
regexp: {
message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
regexp: /^[0-9\s\-()+\.]+$/
}
}
}
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css" />
<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.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
Reserve Product
<div class="modal fade" id="reserveModal" tabindex="-1" role="dialog" aria-labelledby="reserveModal" 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>
<h4 class="modal-title" id="myModalLabel">Reserve Product</h4>
</div>
<div class="modal-body">
<!-- FORM -->
<form id="frm_reserve" name="frm_reserve" class="horizontal">
<fieldset>
<div class="form-group">
<label for="inputRName" class="col-xs-6 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="inputRName" id="inputRName" placeholder="Your Name" data-placement="top" required autofocus>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-xs-6 control-label">Address</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" name="textAddress" id="textAddress" placeholder="Your Address"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputlName" class="col-xs-6 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="inputREmail" id="inputREmail" placeholder="email#you.com" required>
</div>
</div>
<div class="form-group">
<label for="inputlName" class="col-xs-6 control-label">Contact No.</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="inputRContact" id="inputRContact" placeholder="09XX-XXX-XXXX" required>
</div>
</div>
</fieldset>
</form>
Fiddle Working Example

Bootstrap form with modal, validator and email

I'm trying to make an html page with bootstrap and bootstrap validator.
What i want to do :
When the user click on the button, a modal appear with a form.
After validation, form sent an email with the fields value.
When the mail was correctly sent, an other modal appear with some informations
My problem :
my script with bootstrap validator doesn't work. When a field is in error, the form is sent every time the error appear.
If i complete all the fields, the page reboot and nothing work.
please, can you help me to find my mistake ?
my html :
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrapValidator.js"></script>
<script language="JavaScript">
<!--vérif formulaire-->
function verif() {
$('#contact')
.bootstrapValidator({
live: 'disabled',
message: 'Cette valeur est invalide',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
e1: {
validators: {
notEmpty: {
message: 'Votre nom est obligatoire'
}
}
},
e2: {
validators: {
notEmpty: {
message: 'Votre prenom est obligatoire'
}
}
},
e3: {
validators: {
notEmpty: {
message: 'Votre adresse mail est obligatoire'
},
/*emailAddress: {
message: 'Le format de votre adresse mail n est pas valide'
}*/
}
},
e4: {
validators: {
notEmpty: {
message: 'Votre numero de telephone est obligatoire'
}
}
},
/*homePhone: {
validators: {
digits: {
message: 'The home phone number is not valid'
}
}
},*/
}
})
.on('error.form.bv', function(e) {
console.log('error.form.bv');
var $form = $(e.target);
console.log($form.data('bootstrapValidator').getInvalidFields());
})
.on('success.form.bv', function(e) {
console.log('success.form.bv');
envoimail();
})
}
function envoimail() {
alert("lancement mail ok");
$.ajax({
type: "POST",
url: "process.php",
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg);
alert("thanks ok");
$("#myModal").modal('hide');
alert("hide ok");
$("#synthese").modal('show');
alert("show ok");
},
error: function(){
alert("Echec de l envoi du formulaire");
},
});
};
</script>
</head>
<body>
<div>
<button type="button" class="btn btn-primary btn-lg center-block" data-toggle="modal" data-target="#myModal">
Lancer le calcul
</button>
</div>
<div id="thanks">
<p>test</p>
</div>
<br>
<!-- Modal 1 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<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>
<h4 class="modal-title" id="myModalLabel">Quelques informations sur vous :</h4>
</div>
<div class="modal-body">
<form id="contact" class="form-horizontal contact" name="contact">
<div class="form-group">
<label class="col-lg-4 control-label">Nom</label>
<div class="col-lg-6">
<input class="form-control" id="e1" name="e1" type="text" style="text-align:left" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Prénom</label>
<div class="col-lg-6">
<input class="form-control" id="e2" name="e2" type="text" style="text-align:left" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Fonction</label>
<div class="col-lg-6">
<input class="form-control" id="e5" name="e5" type="text" style="text-align:left"/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Email</label>
<div class="col-lg-6">
<input class="form-control" id="e3" name="e3" type="text" style="text-align:left" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Téléphone</label>
<div class="col-lg-6">
<input class="form-control" id="e4" name="e4" type="text" style="text-align:left" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Message</label>
<div class="col-lg-6">
<input class="form-control" id="e6" name="e6" type="text" style="text-align:left" />
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<button type="submit" id="resultat" class="btn btn-primary btn-lg center-block" onclick="verif()" >Afficher le résultat</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal fade" id="synthese" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"">
<div class="modal-dialog modal-lg" role="document">
<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>
<h4 class="modal-title" id="myModalLabel">Synthèse :</h4>
</div>
<div class="modal-body">
<div class="modal-body">
<button type="button" class="btn right" data-dismiss="modal" style="float:right;">Relancer</button>
</div>
<br>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
My process.php :
<?php
$myemail = 'mail#domaine.fr';
if (isset($_POST['e1'])) {
$e1nom = strip_tags($_POST['e1']);
$e2prenom = strip_tags($_POST['e2']);
$e3mail = strip_tags($_POST['e3']);
$e4tel = strip_tags($_POST['e4']);
$e5fonction = strip_tags($_POST['e5']);
$e6message = strip_tags($_POST['e6']);
echo "<span class=\"alert alert-success\" >Your message has been received. Thanks! Here is what you submitted:</span><br><br>";
echo "<stong>Nom : </strong> ".$e1nom."<br>";
echo "<stong>Prenom: </strong> ".$e2prenom."<br>";
echo "<stong>Mail : </strong> ".$e3mail."<br>";
echo "<stong>Tel : </strong> ".$e4tel."<br>";
echo "<stong>Fonction : </strong> ".$e5fonction."<br>";
echo "<stong>Message : </strong> ".$message."<br>";
$to = $myemail;
$email_subject = "Lancement du simulateur de prix PPE";
$email_body = "Lancement d une nouvelle simulation. \n\n".
" Detail de la simulation :\n\n".
" Nom : $e1nom \n".
" Prenom : $e2prenom \n".
" Mail : $e3mail \n".
" Tel : $e4tel \n".
" Fonction : $e5fonction \n".
" Message :\n $e6message";
$headers = "From: mail#domaine.fr\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}?>

When it comes to forms through javascript you should always validate serverside as well anyway (since you can't trust anything the visitor sends you), that aside, there's nothing to stop the form submitting when the submit button is used.
So either change the form buttons type to 'button' instead of 'submit' or in the start of your validation add something to stop the form from running it's default action. Something along the lines of -
function verif(){$('#contact').preventDefault();$('#contact')....
Or even better, use both. That way the form won't be submitted until the checks have been run against the form no matter how.

Comment this line : live: 'disabled',
Suggestion :
1.) // Validate the form manually
$('#resultat').click(function() {
$('#contact').bootstrapValidator('validate');
});
2.) write your code in document.ready function.
Modified :
.on('error.field.bv', function(e, data) {
//console.log('error.field.bv -->', data.element);
})
.on('success.field.bv', function(e, data) {
//console.log('success.field.bv -->', data.element);
// envoimail();
})
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post('process.php', $form.serialize(), function(result) {
console.log(result);
}, 'json');
});

Change the button type from "submit" to "button", then in the javascript you can add this if condition
if($('#contact').validate().form()){
envoimail();
});

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 plugin ajax submit not working

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