如何一次验证所有字段
How to validate all fields at once?
我需要一次验证所有字段,我的意思是,如果我在第一个字段中输入了文本,那么剩下的字段应该会显示一条错误消息。
例如,如果我按下带有空字段的提交按钮,它应该会显示一条错误消息。
我的Java脚本如下:
function check()
var fName = document.getElementById('mFirstName');
var lName = document.getElementById('mLastName');
var filter = /^[a-zA-Z0-9]+$/;
if (!filter.test(fName.value)) {
document.getElementById("mfnameValidate").style.display = "block";
fName.focus();
return false;
}
if (!filter.test(lName.value)) {
document.getElementById("mlNmaeValidate").style.display = "block";
lName.focus();
return false;
}
function hideError() {
document.getElementById("mfnameValidate").style.display = "none";
}
function hideError2() {
document.getElementById("mlNmaeValidate").style.display = "none";
}
我的HTML代码:
<form:form method="post" onsubmit="return check();" action="SignUp" modelAttribute="memberBean">
<form:input type="text" class="input" name='mFirstName' id='mFirstName' path='mFirstName' placeholder='First Name' onkeydown="hideError()" />
<span id="mfnameValidate">"First Name should not be blank"</span>
<form:input type="text" class="input" name='mLastName' id='mLastName' path='mLastName' placeholder='Last Name' onkeydown="hideError2()" />
<span id="mlNmaeValidate">"Last Name should not be blank"</span>
和我的.css:
<style>
span {
color: red;
display: none;
}
</style>
这样尝试:
document.forms["theForm"].onsubmit = function(e) {
var allInput = getAllElementsWithAttribute('required');
for (key in allInput) {
if (!allInput[key].value) {
e.preventDefault();
allInput[key].className += allInput[key].className.indexOf('invalid') > -1 ? '' : 'invalid';
} else {
console.log(key)
allInput[key].className = allInput[key].className.replace(/'binvalid'b/, '');
}
}
}
function getAllElementsWithAttribute(attribute) {
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
if (allElements[i].getAttribute(attribute) !== null) {
// Element exists with attribute. Add to array.
matchingElements.push(allElements[i]);
}
}
return matchingElements;
}
.error {
display: none;
color: Red;
}
.invalid+.error {
display: block;
}
<form name="theForm" method="post" novalidate>
<div>
<label>First Name</label>
<input type="text" required>
<span class="error">First Name is required</span>
</div>
<div>
<label>Last Name</label>
<input type="text" required>
<span class="error">Last Name is required</span>
</div>
<input type="submit" value="Submit" />
</form>
还有一把小提琴:https://jsfiddle.net/rmrinmoy/xnLzjhgy/3/
相关文章:
- Rad网格编辑模式通过选中复选框时的java脚本启用禁用所需的字段验证器
- 回发前所需的字段验证程序不起作用
- 将字段设置为有条件地使用所需的字段验证器
- .NET MVC 5 不显眼的禁用字段验证
- Liferay网络表单组件字段验证
- 输入字段验证的键代码函数在chrome中没有按预期工作
- MVC 5防止隐藏字段的必需字段验证
- jQuery字段验证-是否为空,以及正确的值
- JS如何捕获基于键入然后删除的字符的字段验证逻辑
- Javascript Wordpress字段验证匹配
- 字段验证器,它不允许移动到下一个字段
- 在更改另一个字段时触发Yii字段验证
- 进度条和所需字段验证器
- 字段验证:字段需要 JavaScript 正则表达式
- JS 字段验证 - 循环遍历对象,每个字段有三个数据注意事项
- Javascript 空字段验证 - 无法读取未定义的属性“值”
- 有没有办法知道 .net 必填字段验证器是否从 js 启用或禁用
- 避免在字段验证失败时调用 AJAX onsuccess
- 使用 jQuery 使用 asp.net 必填字段验证器验证必填字段
- 如何使用 Angular.js/Javascript 为 url 添加输入字段验证