错误消息或成功提交表单时发出警报消息

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> <!--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> <!-- end snippet -->

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