我正在使用此HTML表单,我正在尝试验证这些字段。我想使用JavaScript检查每个字段是否为空。如果该字段为空,我希望显示隐藏的关联div。
当前问题:如果两个字段都留空,则只显示proName的第一个div,而不显示第二个div。我怎样才能让它们出现?
<html>
<body>
<form action="" method="post" class="form" name="form" onsubmit="return validateForm();">
<p><label for="proName">Processors Name: </label>
<input type="text" name="proName" id="proName"></p>
<div id="alertProName" style="display:none;">
<p>Please fill in this field</p>
</div>
<p><label for="compName">Company Ordered Through: </label>
<input type="text" name="compName" id="compName"></p>
<div id="alertCompName" style="display:none;">
<p>Please fill in this field</p>
</div>
</form>
<script type="text/javascript">
function validateForm() {
var x=document.forms["form"]["proName"].value;
if (x==null || x=="") {
var s = document.getElementById("alertProName").style.display="block";
return false;
}
};
function validateForm() {
var z=document.forms["form"]["compName"].value;
if (z==null || z=="") {
var a = document.getElementById("alertCompName").style.display="block";
return false;
}
};
</script>
</body>
</html>
谢谢!
答案 0 :(得分:3)
function validateForm(){
var valid = true;
var x=document.forms["form"]["proName"].value;
if (x==null || x=="") {
document.getElementById("alertProName").style.display="block"; //show the error message
valid = false;
}else{
document.getElementById("alertProName").style.display="none"; // hide the error message
}
var z=document.forms["form"]["compName"].value;
if (z==null || z=="") {
document.getElementById("alertCompName").style.display="block";//show the error message
valid = false;
}else{
document.getElementById("alertCompName").style.display="none"// hide the error message
}
return valid; // only if both are valid will we submit
}
答案 1 :(得分:1)
验证表单客户端不是一个好主意,因为客户端总是可以绕过它。
但是,如果您确实想在客户端验证表单,可以使用HTML5表单验证:
<input type="text" name="somefield" required />
必需属性告诉浏览器该字段是必需的。
确保使用HTML5 DOCTYPE(<DOCTYPE HTML>
)。
答案 2 :(得分:0)
了解validateForm()
做什么会很有帮助。
我认为它需要成为两种验证方法的包装器,并在一次调用中确定要显示哪个div。目前,如果validateProName
返回false,则不需要执行validateCompName
我会让它做类似下面的事情,它将validateProName和validateCompName的值分配给局部变量,然后如果值为false则显示它们的div。然后,您将简化现有方法......
<script type="text/javascript">
function validateForm() {
var pro= validateProName();
var comp = validateCompName();
if (!pro) {
var s = document.getElementById("alertProName").style.display="block";
}
if (!comp) {
var a = document.getElementById("alertCompName").style.display="block";
}
}
</script>
答案 3 :(得分:0)
为什么不将它们组合成一个函数。
<script type="text/javascript">
function validateForm() {
var x=document.forms["form"]["proName"].value;
if (x==null || x=="") {
var s = document.getElementById("alertProName").style.display="block";
return false;
var z=document.forms["form"]["compName"].value;
if (z==null || z=="") {
var a = document.getElementById("alertCompName").style.display="block";
return false;
}
};
这实现了你想要的吗?
安德鲁
答案 4 :(得分:-1)
将表单更改为:
<form action="" method="post" class="form" name="form" onsubmit="return validateForm(this);">
然后你只需要一个函数来显示div:
<script type="text/javascript">
function validateForm(form) {
for (e in form.elements) {
var element = form.elements[e];
if (element.type == "text") {
console.log(element.name);
var elementName = element.name;
elementName = "alert" + elementName.charAt(0).toUpperCase() + elementName.slice(1);
var alertElement = document.getElementById(elementName);
if (alertElement)
alertElement.style.display = "block";
}
}
return false;
}
</script>
这假设任何时候你有一个文本字段,它也会有一个带有相同名称的DIV,前面带有“alert”。