我正在尝试使用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 = '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);
}?>
答案 0 :(得分：2)
通过javascript来表示你应该总是验证服务器端（因为你不能信任访问者发送给你的任何东西），除此之外，没有什么可以阻止表单提交时使用提交按钮。
因此，要么将表单按钮类型更改为＆＃39;按钮＆＃39;而不是提交＆＃39;或者在验证开始时添加一些内容以阻止表单运行它的默认操作。一些东西 -
function verif(){$('#contact').preventDefault();$('#contact')....
甚至更好，同时使用两者。这样就不会提交表格，直到对表格进行检查，无论如何。
答案 1 :(得分：1)
评论此行： live：'disabled'，
建议：
1.) // Validate the form manually
$('#resultat').click(function() {
$('#contact').bootstrapValidator('validate');
});
2.) write your code in document.ready function.
修改：
.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');
});
答案 2 :(得分：0)
将按钮类型从“提交”更改为“按钮”，然后在javascript中，您可以添加此条件
if($('#contact').validate().form()){
envoimail();
});