检查HTML表单上的空字段
我试图在HTML中创建表单,并试图确保任何字段不为空。检查HTML表单上的空字段
下面是形式
<form role="form" id="companyDetails" name="companyDetails" method="post" action="saveCompanyDetails.jsp" onsubmit="return false;">
<div class="col-lg-6">
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control" id="cmpname" name="cmpname">
<p id="cmpnameError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" rows="3" id="desc" name="desc"></textarea>
<p id="descError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Url</label>
<input type="text" class="form-control" name="url" id="url">
<p id="urlError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Email Id</label>
<input type="text" class="form-control" name="emailid" id="emailid">
<p id="emailidError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Address</label>
<textarea class="form-control" rows="3" id="address" name="address"></textarea>
<p id="addressError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<h1>All Links <i class="fa fa-link"></i></h1>
<div class="form-group">
<label>Facebook Link</label>
<input type="text" class="form-control" name="fblink" id="fblink">
<p id="fblinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Twitter Link</label>
<input type="text" class="form-control" name="twlink" id="twlink">
<p id="twlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Linkedin Link</label>
<input type="text" class="form-control" name="linkinlink" id="linkinlink">
<p id="linkinlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Download Link</label>
<input type="text" class="form-control" name="downlink" id="downlink">
<p id="downlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Live Help Link</label>
<input type="text" class="form-control" name="livehelplink" id="livehelplink">
<p id="livehelpError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Terms & Condition Link</label>
<input type="text" class="form-control" name="tclink" id="tclink">
<p id="tclinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Promotion Link</label>
<input type="text" class="form-control" name="prolink" id="prolink">
<p id="prolinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Sign Up Link</label>
<input type="text" class="form-control" name="signuplink" id="signuplink">
<p id="signuplinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Affiliate Link</label>
<input type="text" class="form-control" name="affiliatelink" id="affiliatelink">
<p id="affiliatelinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Game Link</label>
<input type="text" class="form-control" name="gamelink" id="gamelink">
<p id="gamelinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<button type="submit" class="btn btn-default" onclick="submitData()"><i class="fa fa-check"></i>Submit</button>
<button type="reset" class="btn btn-default"><i class="fa fa-refresh"></i>Reset</button>
</div>
</form>
注意,我有一个<p>
标签的正下方的每个输入字段,其ID值是从它的相应的输入字段的ID构成的HTML。例如。下面的文本字段cmpname
的<p>
标签被ID cmpnameError
现在显示下面的文本字段中显示错误消息的JavaScript代码如下
function submitData() {
var elements = document.querySelectorAll('#companyDetails input, #companyDetails textarea');
for (var i = 0; i < elements.length; i++) {
if (elements[i].value == "") {
var errorElementId = "#" + elements[i].id + "Error";
// alert("Generated ID is " + errorElementId);
document.getElementById(errorElementId).style.display = '';
document.getElementById(errorElementId).innerHTML = "Please enter a value for this field";
return false;
}
}
document.forms['companyDetails'].submit();
return true;
}
我的问题是,正确的错误消息是给当我点击提交时没有显示在表单上。
有人可以帮我关于这个吗?非常感谢你提前。
这里是的jsfiddle链路https://jsfiddle.net/v8ooy2e1/
英镑符号用于使用querySelectorAll
选择带有id
的元素,但不应与getElementById
一起使用。
删除这里的井号:
var errorElementId = "#" + elements[i].id + "Error";
应该是:
var errorElementId = elements[i].id + "Error";
你知道,假设IE 10,你可以跳过这一切的JavaScript花式,只是使用了“必需的”属性:
<input type="text" class="form-control" id="cmpname" name="cmpname" required>
这会调用浏览器支持表单验证。
作为一个符号,这也适用于Chrome浏览器,火狐和Opera,但不支持Safari浏览器,但谁在乎苹果产品无论如何? – Russ 2015-03-19 13:04:13
我多么希望能够使用它,但对于我提出的相同原因,这是不可能的。我需要支持至少IE7! – plutonium1991 2015-03-19 14:45:44
IE7?你可怜的灵魂。 – 2015-03-19 18:21:59
为什么你:
var errorElementId = "#" + elements[i].id + "Error";
离开了 “#”标志。
如果你可以使用jQuery
var isValid = true;
$("#companyDetails").submit(function(event) {
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
})
if (!isValid) {
alert("nopes");
}
});
非常感谢! 现在我意识到我在写代码的时候有多无意识! – plutonium1991 2015-03-20 04:51:07