更改警报函数以在 JavaScript 表单验证上显示 Div

Change Alert Function to Show Div on JavaScript form validation?

本文关键字：验证 表单 显示 Div JavaScript 函数      更新时间：2023-09-26

我正在尝试找到一种方法来更改脚本上的警报功能以显示我的div 'error' ，有人可以告诉我如何做到这一点吗？ 谢谢

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

工作演示

只需在您的 html 页面中添加div 标签，如下所示，使用您指定的 css 类。

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

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

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

for jquery：

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