All geek questions in one place

Bootstrap form with modal, validator and email

I am trying to create an html page using bootstrap and bootstrap.

What I want to do: When the user clicks on the button, the modal appears with the form. After checking the form, send an email with the field values. When the mail has been sent correctly, other modal information appears with some information.

My problem: my bootstrap validator script is not working. When the field is in error, the form is submitted each time an error occurs. If I fill in all the fields, reload the page and nothing will work.

please can you help me find my 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 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">&times;</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">&times;</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 .php process:

 <?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); }?>
+5
source share
3 answers

When it comes to forms through javascript, you should always check the server server the same way you do (since you cannot trust anything that the visitor sends you), in this case there is nothing to stop the form from being submitted using the submit button .

Thus, either change the type of the buttons on the form to 'button' instead of "submit", or at the beginning of your check add something to stop the form from acting by default. Something along the lines -

function verif(){$('#contact').preventDefault();$('#contact')....

Or even better, use both. Thus, the form will not be submitted until the checks are performed against the form no matter how.

+2
source

Comment on this line: live: 'disabled',

Sentence:

 1.) // Validate the form manually $('#resultat').click(function() { $('#contact').bootstrapValidator('validate'); }); 2.) write your code in document.ready function.

Modified by:

 .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'); });
+1
source

Change the type of the submit button to button, then in javascript you can add this if the condition

 if($('#contact').validate().form()){ envoimail(); });
0
source

Source: https://habr.com/ru/post/1241586/

More articles:


All Articles