个人中心
gpt4 book ai didi

javascript - 带有模态、验证器和电子邮件的 Bootstrap 表单

转载 作者：可可西里 更新时间：2023-11-01 13:25:56 24 4
gpt4 key购买 nike

我正在尝试使用 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">&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>

我的 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);
}?>

最佳答案

当涉及到通过 javascript 的表单时，您也应该始终验证服务器端(因为您不能相信访问者发送给您的任何内容)，除此之外，使用提交按钮时没有什么可以阻止表单提交。

因此，要么将表单按钮类型更改为“按钮”而不是“提交”，要么在验证开始时添加一些内容以阻止表单运行其默认操作。类似的东西 -

函数 verif(){$('#contact').preventDefault();$('#contact')...

或者更好的是，同时使用两者。这样，无论如何，在对表单进行检查之前，不会提交表单。

关于javascript - 带有模态、验证器和电子邮件的 Bootstrap 表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35034314/

24 4 0
文章推荐： windows - 使用命令行开关将 PDF 另存为文本 - 可以做到吗？
文章推荐： html - 获取网站的高度并将其应用于 div
文章推荐： c++ - 优雅地捕获 LoadLibrary() 错误
文章推荐： Javascript CSS 过渡在过渡开始时结束触发
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com