5
我試圖用bootstrap和bootstrap驗證器製作html頁面。帶模式，驗證器和電子郵件的Bootstrap表格
我想要做的事情： 當用戶點擊按鈕時，模態會以表格的形式出現。 驗證通過後，表單發送了一個包含字段值的電子郵件。 當郵件被正確發送，其他模式出現與一些信息
我的問題： 我的腳本與引導驗證器不起作用。當某個字段出錯時，每次出現錯誤時都會發送該表單。 如果我完成所有的領域，頁面重新啓動，並沒有工作。
拜託，你能幫我找到我的錯誤嗎？
我的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>
我process.php：
<?php
$myemail = '[email protected]';
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: [email protected]\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}?>
讓你的字段名字符串，如E1 --->「E1」 – Monty
對不起，我不明白我需要做什麼： -/ – Gurol
試試這個並編譯你的代碼。你面臨什麼錯誤？ – Monty