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();

注意：为什么要混合使用jQuery和JavaScript。使用一个，它更容易。

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

/*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>

希望这清楚。

Answer 2

将#alert设为display：none;默认情况下

    #alert {
      display:none;
    }

JS：

show.style.display="block";

Answer 3

Try removing border attribute from this code:

  #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;
}

你可以尝试在js中使用.css属性给出边框，如下所示：

$("#alert").css('border','1px solid transparent');

Answer 4

您可以尝试以下代码。我测试了它，它的工作..
<style> #alert { margin: 30px auto; background: purple; color: #fff; 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; } </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <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">  <div id="alert"></div> </form> 

<script> /*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").css('border','1px solid transparent'); </script>

如果出现错误或成功提交表单，则发出警报消息

4 个答案: