javascript - Bootstrap form with modal, validator and email -
i'm trying make html page bootstrap , bootstrap validator.
what want : when user click on button, modal appear form. after validation, form sent email fields value. when mail correctly sent, other modal appear informations
my problem : script bootstrap validator doesn't work. when field in error, form sent every time error appear. if complete fields, page reboot , nothing work.
please, can me find 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 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 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 comes forms through javascript should validate serverside anyway (since can't trust visitor sends you), aside, there's nothing stop form submitting when submit button used.
so either change form buttons type 'button' instead of 'submit' or in start of validation add stop form running it's default action. along lines of -
function verif(){$('#contact').preventdefault();$('#contact')....
or better, use both. way form won't submitted until checks have been run against form no matter how.
Comments
Post a Comment