更改警报功能以在JavaScript表单验证中显示Div？

Question

我试图找到一种方法来更改脚本上的警报功能以显示div“错误”，有人可以告诉我如何执行此操作吗？ 谢谢

HTML：

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
 First name: <input type="text" name="fname">
 <input type="submit" value="Submit">
 </form>

JAVASCRIPT：

function validateForm()
 {
 var x=document.forms["myForm"]["fname"].value;
 if (x==null || x=="")
   {
   alert("First name must be filled out");
   return false;
   }
 }

我努力了：

function validateForm()
 {
 var x=document.forms["myForm"]["fname"].value;
 if (x==null || x=="")
   {
   show("error");
   return false;
   }
 }

错误CSS：

.error{
width: 946px;
margin: auto;
height: 20px;
overflow: hidden;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
font-size:14px;
padding:20px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #000;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color:#FF9933 ;
margin-bottom:30px;
display: none

}

Answer 1

工作演示

只需在html页面中添加div标签（如下所示）以及指定的css类即可。

   <div id ="alertBox" class="error">
    ERROR
  </div>

只需在javascript中添加以下行即可。

document.getElementById("alertBox").style.display='block';

Answer 2

对于jQuery：

$("#error").css({ // if "error" is a class use: $(".error").css({
    display:'block'
});