更改警报函数以在 JavaScript 表单验证上显示 Div
Change Alert Function to Show Div on JavaScript form validation?
我正在尝试找到一种方法来更改脚本上的警报功能以显示我的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'
});
相关文章:
- JAVASCRIPT验证表单中的日期
- 如何在使用ajax提交的codeigniter中使用form_validation验证表单数据
- 如何使用jQuery正确验证表单
- Javascript不会验证表单
- 如何使用javascript验证表单中的数据,然后调用php页面
- 包括来自另一个页面的Boostrap模态;t验证表单
- Javascript验证表单不重定向页面
- 在提交之前验证表单,jQuery发布到javaScript,然后提交到确认页面
- 引导复选框-x 选中时未正确更新 DOM - 如何验证表单
- Jquery 验证表单
- 验证表单中的 jQuery-UI 微调器
- 在 Jquery 中验证表单的输入字段
- 如何验证表单控制数据大小不超过2.5 mb
- 在表单进入Angular中的ng-submit之前验证表单
- Javascript表单验证:表单在错误返回时提交:
- 使用Angular.js验证表单输入的原始状态
- 正在复制验证表单
- 如何在转盘中逐步(3步)验证表单
- 使用javascript验证表单值
- 验证表单按id输入val