当需要填写表格时，如何禁用弹出成功消息？答案

【问题标题】：How can I disable the popup success message when the form is required to fill?当需要填写表格时，如何禁用弹出成功消息？
【发布时间】：2021-04-07 08:56:45
【问题描述】：

我计划在单击提交按钮时显示成功消息。但是，每当需要填写表格时，我想禁用或隐藏成功消息。那么如何通过更改脚本中的代码来做到这一点？请帮助我，非常感谢您的支持！

这是我的代码：

<div class="contact-wrapper">
  <main class="flex-container">
    <section class="main-content">
      <form class="contact-form" action="index.html" method="post" onsubmit="return false">
        <input type="text" class="contact-form-text" placeholder="Name" id="name" required/>
        <input type="email" class="contact-form-text" placeholder="Email" id="email" required/>
        <input type="text" class="contact-form-text" placeholder="Title">
        <textarea class="contact-form-text" placeholder="Type your message..."></textarea>
        <button>Send</button>

        <div class="alert">
          <span class="message">Success: You Message Sent Successfully!</span>
        </div>
      </form>
    </section>

<script>
  function validateForm() {
    var name =  document.getElementById('name').value;
    var name =  document.getElementById('email').value;
  }

  $('button').click(function(){
    $('.alert').addClass("show");
    $('.alert').addClass("showAlert");
    $('.alert').removeClass("hide");
    setTimeout(function(){
      $('.alert').addClass("hide");
      $('.alert').removeClass("show");
    },3000);
  });
</script>

【问题讨论】：

请包含您在项目中使用的任何其他依赖项（css 库、js 库）。

标签： javascript html forms

【解决方案1】：

考虑最初隐藏消息并仅在成功提交时显示它

<div class="alert hide">
     <span class="message">Success: You Message Sent Successfully!</span>
</div>

您应该仅在表单验证返回 true 时显示警报。

function validateForm() {
    var name =  document.getElementById('name').value;
    var email =  document.getElementById('email').value;
    if(name == '' || name == null || email == '' || email == null){
       alert("Please Fill All Required Field");
       return false;
      }
    return true;
  }

$('button').click(function(){
     if(validateForm()){
       // your code for submission
       // after successful submission display the alert message
       $('.alert').removeClass("hide");
       $('.alert').addClass("show");
       $('.alert').addClass("showAlert");    
     }
    
  });

我建议您遵循form validation 和form submission 的标准格式。 link here

【讨论】：