Fatal编程技术网
  • javascript/
  • Javascript 提交表格后返回false不工作

Javascript 提交表格后返回false不工作

javascript html forms validation bootstrap-4

Javascript 提交表格后返回false不工作,javascript,html,forms,validation,bootstrap-4,Javascript,Html,Forms,Validation,Bootstrap 4,我正在使用引导表单和ajax向后端脚本提交一个联系人表单 返回false不会阻止我的表单在ajax回调后再次提交。这将导致新的引导表单验证，显示输入错误消息 即使使用event.preventDefault（）我也读到了一些类似的问题，但它不起作用 html <body> <form id="contact-form" method="POST" class="needs-validation" onsubmit="return false" novalida

我正在使用引导表单和ajax向后端脚本提交一个联系人表单

返回false
不会阻止我的表单在ajax回调后再次提交。这将导致新的引导表单验证，显示输入错误消息

即使使用
event.preventDefault（）
我也读到了一些类似的问题，但它不起作用

html

    <body>

    <form id="contact-form" method="POST" class="needs-validation" onsubmit="return false" novalidate>
      <div class="form-group">
         <label for="name">Nome</label>
         <input type="text" name="name" id="name" class="form-control" required />
         <div class="invalid-feedback">
             Please, type your name
         </div>
      </div>
      <div class="form-group">
         <label for="email">Email</label>
         <input type="email" name="email" id="email" class="form-control" required />
         <div class="invalid-feedback">
            Please, type your e-mail
         </div>
      </div>
      <div class="form-group">
         <label for="subject">Assunto</label>
         <input type="text" name="subject" id="subject" class="form-control" />
      </div>
      <div class="form-group">
          <label for="message">Mensagem</label>
          <textarea name="message" id="message" class="form-control" rows="3" required minlength="10"></textarea>
          <div class="invalid-feedback">
             Leave your message
          </div>
      </div>
      <button type="submit" class="btn send-btn">Enviar</button>
      <div id="messages" class="show_messages"></div>
      <div id="error_messages" class="show_error"></div>
    </form>


 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

<script>

(function () {
    'use strict';
     window.addEventListener('load', function () {
        var forms = document.getElementsByClassName('needs-validation');
        var validation = Array.prototype.filter.call(forms, function (form) {
           form.addEventListener('submit', function (event) {
             if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
             }
           form.classList.add('was-validated');

           if (form.checkValidity() === true) {

              var name = $("input#name").val();
              var email = $("input#email").val();
              var subject = $("input#subject").val();
              var message = $("textarea#message").val();
              var dataString = 'name=' + name + '&email=' + email + '&subject=' + subject + '&message=' + message;
              var url = "./serverside/send-mail.php";

              $.ajax({
                 type: "POST",
                 url: url,
                 data: dataString,
                 success: function (data) {

                 console.log(data);
                 var response = JSON.stringify(data);
                 console.log(response);

                 if (data == "\"E-mail sent\"") {

                 console.log("email sent after stringify");

                 $("#messages").addClass("messages")
                   .html("<img src='./img/check.png' alt='Check' /> Message sent!")
                   .hide().fadeIn(800, function () {
                       setTimeout(() => {
                          $("#messages").hide(500);
                       }, 3000);
                    });
                    $('#contact-form')[0].reset();

                 } else {
                    $('#contact-form')[0].reset();
                    console.log("E-mail was not sent");

                    $("#error_messages").addClass("error_messages")
                     .html("<img src='./img/warning.png' alt='Warning' /> Ops! Error sending your message.")
                     .hide().fadeIn(800, function () {
                        setTimeout(() => {
                           $("#error_messages").hide(500);
                        }, 3000);
                     });
                                    }
               },
               error: function (e) {
                 console.log(e);
                 $("#error_messages").addClass("error_messages")
                  .html("<img src='./img/warning.png' alt='Warning' /> Ops! Error sending your message.")
                  .hide().fadeIn(800, function () {
                     setTimeout(() => {
                       $("#error_messages").hide(500);
                     }, 3000);
                  });
                 }
            });
            return false;
         }

     }, false);
   });
 }, false);
})();
</script>

</body>


诺姆
请输入您的名字
电子邮件
请键入您的电子邮件
阿桑托
男装
留言
羡慕
（功能（）{
"严格使用",；
window.addEventListener（'load'，函数（）{
var forms=document.getElementsByClassName（'needs-validation'）；
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
if（form.checkValidity（）==true）{
变量名称=$（“输入名称”）.val（）；
var email=$（“输入电子邮件”）.val（）；
var subject=$（“输入对象”）.val（）；
var message=$（“textarea#message”）.val（）；
var dataString='name='+name+'&email='+email+'&subject='+subject+'&message='+message；
var url=“./serverside/send mail.php”；
$.ajax({
类型：“POST”，
url:url，
数据：dataString，
成功：功能（数据）{
控制台日志（数据）；
var response=JSON.stringify（数据）；
控制台日志（响应）；
如果（数据=“\”已发送的电子邮件\”）{
console.log（“stringify之后发送的电子邮件”）；
$（“#消息”）.addClass（“消息”）
.html（“已发送邮件！”）
.hide（）.fadeIn（800，函数（）{
设置超时（（）=>{
$（“#消息”）.hide（500）；
}, 3000);
});
$（“#联系方式”）[0]。重置（）；
}否则{
$（“#联系方式”）[0]。重置（）；
console.log（“未发送电子邮件”）；
$（“错误消息”）.addClass（“错误消息”）
.html（“Ops！发送邮件时出错。”）
.hide（）.fadeIn（800，函数（）{
设置超时（（）=>{
$（“#错误消息”）.hide（500）；
}, 3000);
});
}
},
错误：函数（e）{
控制台日志（e）；
$（“错误消息”）.addClass（“错误消息”）
.html（“Ops！发送邮件时出错。”）
.hide（）.fadeIn（800，函数（）{
设置超时（（）=>{
$（“#错误消息”）.hide（500）；
}, 3000);
});
}
});
返回false；
}
}，假）；
});
}，假）；
})();
经过一些测试，我终于找到了解决方案。在
reset（）
之后，我应该删除类
的表单被验证


if (data == "\"E-mail sent\"") {

   console.log("email sent after stringify");

   $("#messages").addClass("messages")
   .html("<img src='./img/check.png' alt='Check' /> Message sent!")
   .hide().fadeIn(800, function () {
        setTimeout(() => {
          $("#messages").hide(500);
        }, 3000);
    });

    $('#contact-form')[0].reset();
    form.classList.remove('was-validated');

} else {

...



if（数据=“\”已发送电子邮件\”）{
console.log（“stringify之后发送的电子邮件”）；
$（“#消息”）.addClass（“消息”）
.html（“已发送邮件！”）
.hide（）.fadeIn（800，函数（）{
设置超时（（）=>{
$（“#消息”）.hide（500）；
}, 3000);
});
$（“#联系方式”）[0]。重置（）；
form.classList.remove（'was-validated'）；
}否则{
...



也许这是一个解决办法，但它确实起了作用。
您应该始终启动
预防默认值
，而不仅仅是在
检查有效性
为false时。@Velimirtchatvsky是的。我现在这样做了，将其从表单中删除，并在
if（form.checkValidity（）==true）之后添加
{…
行，但它还没有工作。您的代码看起来很乱。为什么不直接使用完整的jQuery？
if（form.checkValidity（）==true）
可以是：
if（form.checkValidity（））
，因为
checkValidity（）
返回一个布尔值。而且，您可以省去
.addEventListener（）的
参数
调用，因为
false
是该参数的默认值。@ScottMarcus好的，谢谢。但它不能解决问题。