我有一个工作表单验证，在通过联系表单发送电子邮件之前检查字段。
表单验证在 twitter 引导模式中不起作用。如果所有字段均已填写且正确，则脚本会在 JS 中检查。然后将信息发送到 php 文件进行处理，并在 AJAX 中将 false 或 true 返回到 JS 文件，该文件向用户确认电子邮件是否发送。
当我尝试将其插入 Bootstrap 模式时，AJAX true 不会返回到 JS 文件，它只会在浏览器窗口中显示“true”。
它需要将“true”发送到 JS 文件，以便在单击发送时“发送按钮”在“消息成功发送”中发生变化，它将重定向到 email.php。
那么如何将“true”值传递给 JS 文件并保持模式打开以将发送按钮更改为成功消息？
代码如下：
HTML
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<img class="small-logo" src="http://www.website.nl/img/logo.jpg">
</div>
<div class="modal-body">
<form class="popup-form" data-async data-target="#myModal" id="contact_form" action="email.php" method="POST">
<div class="forminput">
<p>Aanhef</p>
<input type="radio" name="aanhef" value="dhr" id="aanhef" required="required" />
<label for="dhr">Dhr.</label>
<input type="radio" name="aanhef" value="mvr" id="aanhef" required="required"/>
<label for="mvr">Mvr.</label>
<div id="aanhef_error" class="error">Kies uw aanhef</div>
</div>
<div class="forminput">
<p>Achternaam</p>
<input type='text' name='naam' id='naam' required="required">
<div id='naam_error' class='error'>Vul een geldige naam in</div>
</div>
<div class="forminput">
<p>Voornaam</p>
<input type='text' name='voornaam' id='voornaam' required="required">
<div id='voornaam_error' class='error'>Vul een geldige voornaam in</div>
</div>
<div class="forminput">
<p>Telefoonnummer</p>
<input type='text' name='telefoon' id='telefoon' required="required">
<div id='telefoon_error' class='error'>Vul een geldig telefoon nummer in</div>
</div>
<div class="forminput">
<p>Straatnaam</p>
<input type='text' name='straatnaam' id='straatnaam' required="required">
<div id='straatnaam_error' class='error'>Vul een geldige straatnaam in</div>
</div>
<div class="forminput">
<p>Huisnummer</p>
<input type='text' name='huisnummer' id='huisnummer' required="required">
<div id='huisnummer_error' class='error'>Vul een geldig huisnummer in</div>
</div>
<div class="forminput">
<p>Postcode</p>
<input type='text' name='postcode' id='postcode' required="required">
<div id='postcode_error' class='error'>Vul een geldige postcode in</div>
</div>
<div id='mail_success' class='success'>Message successfully send!</div>
<div id='mail_fail' class='error'>Sending email failed try emailing to email@email.com</div>
<div class="clear"></div>
<div id='submit'>
<input type='submit' id='send_message' value='Verstuur'>
</div>
</form>
</div>
</div>
</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';
}
?>