javascript - 错误或成功提交表单时的警报消息

Question

所以我在这个表单上尝试应用简单的表单验证并且一切正常，除非我想在用户离开空白字段或表单已成功提交时显示警告消息。但问题是我的表单下方有一条紫色线，我想在提交表单之前将其隐藏。

/*simple form validation script*/
var formData = document.forms.myForm;
var show = document.getElementById("alert");

formData.onsubmit = function() {

  if (formData.name.value == "") {
    show.innerHTML = "Please fill out all fields!";
    return false;
  } else {
    $("#alert").css("display", "block");
    show.innerHTML = "successful submission of form!";
    return true;
  }
};

#alert {
  margin: 30px auto;
  background: purple;
  color: #fff;
  border: 1px solid transparent;
  padding: 0px 20px;
  width: 30%;
  font-size: 20px;
  border-radius: 2px;
  -webkit-transition: background 2s ease;
  -moz-transition: background 2s ease;
  -ms-transition: background 2s ease;
  -o-transition: background 2s ease;
  transition: background 2s ease;
}

<!--simple form validation with javascript example-->
<form name="myForm" action="#">
  <label>Name:</label>
  <input type="text" name="name">
  <label>Password:</label>
  <input type="password" name="pass" placeholder="Password">
  <input type="submit" name="submit" value="submit">
  <!--alert-->
  <div id="alert"></div>
</form>

<script src="formValidation.js" type="text/javascript"></script>

请帮助我或至少清除此逻辑。谢谢!

Answer 1

您拥有的这段代码的问题是，您正在正常 提交它，这意味着该页面被导航到另一个页面，您会在其中看到 POST 结果。在这里，新页面被加载，所有旧的 JavaScript 被丢弃。

要使用 CSS 显示 #alert，您需要在同一页面，因此使用 AJAX 是最好的方法。这就是原因，即使在 JavaScript 执行之前，当它导航到新页面时您也看不到输出。

同时在顶部添加以下代码，将帮助您在显示之前隐藏警告框(现在显示为细线):

$("#alert").hide();

Note: Why are you mixing up both jQuery and JavaScript. Use one, it is easier.

更新:隐藏紫色细线代码:

/*simple form validation script*/
$(function () {
  $("#alert").hide();
  $("form").submit(function() {
    if (this.name.value == "") {
      $("#alert").text("Please fill out all fields!").show();
    } else {
      $("#alert").text("Successful submission of form!").show();
      $.post($(this).attr("action"), $(this).serialize(), function () {
        $("#alert").text("Successful submission of form!").show();
      });
    }
    return false;
  });
});

#alert {
  margin: 30px auto;
  background: purple;
  color: #fff;
  border: 1px solid transparent;
  padding: 0px 20px;
  width: 30%;
  font-size: 20px;
  border-radius: 2px;
  -webkit-transition: background 2s ease;
  -moz-transition: background 2s ease;
  -ms-transition: background 2s ease;
  -o-transition: background 2s ease;
  transition: background 2s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--simple form validation with javascript example-->
<form name="myForm" action="#">
  <label>Name:</label>
  <input type="text" name="name">
  <label>Password:</label>
  <input type="password" name="pass" placeholder="Password">
  <input type="submit" name="submit" value="submit">
  <!--alert-->
  <div id="alert"></div>
</form>

<script src="formValidation.js" type="text/javascript"></script>

希望一切顺利。