Form Validation on Twitter Bootstrap Modal

Form Validation on Twitter Bootstrap Modal

I have a working form validation that checks fields before sending the
email trough the contact form.
The form validation won't work inside the twitter bootstrap Modal. The
script checks in JS if all the fields are filled and are correct. Then
sends the information to the php file for processing and returns false or
true in AJAX back to the JS file that confirms to the user if the email is
send or not.
When i tried to plug this in to the Bootstrap Modal the AJAX true wont
return to the JS file and it just displays "true" in the browser window.
It needs to send the "true" to the JS file so the "send button" changes in
"messages succesfully send" when clicking send it redirects to email.php.
So how can the "true" value be passed on to the JS file and keep the modal
open to change the send button into the successfull message?
The code is as following:
HTML
x
Aanhef
Dhr. Mvr. Kies uw aanhef
Achternaam
Vul een geldige naam in
Voornaam
Vul een geldige voornaam in
Telefoonnummer
Vul een geldig telefoon nummer in
Straatnaam
Vul een geldige straatnaam in
Huisnummer
Vul een geldig huisnummer in
Postcode
Vul een geldige postcode in Uw bericht is verzonden! Email versturen
mislukt. Probeer a.u.b. te emailen naar info@niovastgoed.nl
</div>
JS
$(document).ready(function(){
$('#send_message').click(function(e){
//Stop form submission & check the validation
e.preventDefault();
// Variable declaration
var error = false;
var aanhef = $('input[name=aanhef]:checked').val();
var naam = $('#naam').val();
var voornaam = $('#voornaam').val();
var straatnaam = $('#straatnaam').val();
var huisnummer = $('#huisnummer').val();
var postcode = $('#postcode').val();
var telefoon = $('#telefoon').val();
// Form field validation
if (aanhef == undefined) {
var error = true;
$('#aanhef_error').fadeIn(500);
}
else {
$('#aanhef_error').fadeOut(500);
}
if(naam.length < 3){
var error = true;
$('#naam_error').fadeIn(500);
}else{
$('#naam_error').fadeOut(500);
}
if(voornaam.length < 3){
var error = true;
$('#voornaam_error').fadeIn(500);
}else{
$('#voornaam_error').fadeOut(500);
}
if(straatnaam.length < 6){
var error = true;
$('#straatnaam_error').fadeIn(500);
}else{
$('#straatnaam_error').fadeOut(500);
}
if(huisnummer == ""){
var error = true;
$('#huisnummer_error').fadeIn(500);
}else{
$('#huisnummer_error').fadeOut(500);
}
if(postcode.length < 5){
var error = true;
$('#postcode_error').fadeIn(500);
}else{
$('#postcode_error').fadeOut(500);
}
if(telefoon.length < 8){
var error = true;
$('#telefoon_error').fadeIn(500);
}else{
$('#telefoon_error').fadeOut(500);
}
// If there is no validation error, next to process the mail function
if(error == false){
// Disable submit button just after the form processed 1st time
successfully.
$('#send_message').attr({'disabled' : 'true', 'value' :
'Versturen...' });
/* Post Ajax function of jQuery to get all the data from the
submission of the form as soon as the form sends the values to
email.php*/
$.post("email.php",
$("#contact_form").serialize(),function(result){
//Check the result set from email.php file.
if(result == 'sent'){
//If the email is sent successfully, remove the submit
button
$('#submit').remove();
//Display the success message
$('#mail_success').fadeIn(500);
}else{
//Display the error message
$('#mail_fail').fadeIn(500);
// Enable the submit button again
$('#send_message').removeAttr('disabled').attr('value',
'Send The Message');
}
});
}
});
});
PHP
<?php
$to = 'email@email.com' . ', '; // note the comma
$to .= 'email2@email.com';
$subject = ' Subject of email';
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: ' . $_REQUEST['naam'] . "<br>";
$headers .= 'Reply-To: ' . $_REQUEST['email'] . "<br>";
$message .= 'Aanhef: ' . $_REQUEST['aanhef'] . "<br>";
$message .= 'Achternaam: ' . $_REQUEST['naam'] . "<br>";
$message .= 'Voornaam: ' . $_REQUEST['voornaam'] . "<br>";
$message .= 'Straatnaam: ' . $_REQUEST['straatnaam'] . "<br>";
$message .= 'Huisnummer: ' . $_REQUEST['huisnummer'] . "<br>";
$message .= 'Postcode: ' . $_REQUEST['postcode'] . "<br>";
$message .= 'Telefoon: ' . $_REQUEST['telefoon'] . "<br>";
if (@mail($to, $subject, $message, $headers))
{
// Transfer the value 'sent' to ajax function for showing success
message.
echo 'sent';
}
else
{
// Transfer the value 'failed' to ajax function for showing error
message.
echo 'failed';
}
?>