Javascript:表单验证-从更正字段中删除错误消息
Javascript: Form Validation - Remove error messages from corrected fields
当我提交有错误的表单时(例如用户没有完成必需的字段),我能够显示错误消息。但是,如果我更正其中一个字段并再次提交,两个错误消息仍然存在。
只有当所有字段都正确填写时才会出现错误。
我做错了什么?
如果我更正一个字段并单击提交,则更正字段的错误消息将消失,只有保留的不正确字段才会有错误消息。
HTML: <form id="frm1">
<fieldset id="controls">
<div>
<label for="firstname">First Name: </label>
<input type="text" id="firstname">
<span id="errFname" class="errmsg">* You must enter a first name</span>
</div>
<div>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname">
<span id="errLname" class="errmsg">* You must enter a first name</span>
</div>
<div>
<input type="submit" value="Submit">
</div>
</fieldset>
</form>
脚本:
function checkForm(){
document.getElementById("frm1").addEventListener("submit", function(e) {
var errors = [];
//Validate first name: Required, Alphabetic (no numbers)
if(document.getElementById("firstname").value === "") {
document.getElementById("errFname").style.display = "inline";
document.getElementById("firstname").focus();
errors.push("required");
}//close if
var alphaRegEx = /^[a-zA-Z]+$/;;
var alphafname = document.getElementById("firstname").value;
var alphalname = document.getElementById("lastname").value;
//check if first name has any digits
if (!alphaRegEx.test(alphafname)){
document.getElementById("errFname").style.display = "inline";
document.getElementById("firstname").value="";
document.getElementById("firstname").focus();
errors.push("numeric");
}//close if
//check if last name has any digits
if (!alphaRegEx.test(alphalname)){
document.getElementById("errLname").style.display = "inline";
document.getElementById("lastname").value="";
document.getElementById("lastname").focus();
errors.push("numeric");
}//close if
//If you want, you can do something with your errors, if not, just return
if (errors.length > 0) {
e.preventDefault();
return false;
}
return true;
});//close function
}//close function (checkForm)
window.onload=checkForm;
必须首先清除checkForm
调用时的所有错误。
function checkForm() {
clearErrors();
Rest functionality same...
}
function clearErrors() {
Array.prototype.forEach.call(
document.getElementsByClassName("errmsg"),
function(el) { el.style.display = "none"; }
);
}
这将首先清除所有错误,然后只显示那些尚未解决的错误。
解决方案在通过验证之前将每个错误消息显示属性设置为'none'。
function checkForm() {
//Event listener
document.getElementById("contactForm").addEventListener("submit", function(prevent) {
//Set display property for inline error messages to none
document.getElementById("errFname").style.display = 'none';
document.getElementById("errLname").style.display = 'none';
//Rest of code remains the same...
相关文章:
- 如何在HTML输入字段中添加不可删除的后缀
- JS动态添加字段-删除按钮不起作用
- 如何选择多个输入字段并删除所需的属性
- 添加和删除隐藏字段数组中的值,而不提交表单
- 在Reactjs中添加和删除值未重置的输入字段
- 如何在单击时从输入字段中删除最后一个字符
- Javascript删除字段
- 在粘贴事件Javascript的输入字段中删除所有非数字字符
- 使用JQuery动态插入/删除字段
- 引导表单动态添加带有字段的删除表单
- 删除创建的 JavaScript 字段集
- 使用按钮动态添加输入字段,而不删除唯一字段上的按钮
- 如何动态删除使用 JavaScript 动态创建的输入字段
- 克隆字段上的“添加-删除”按钮
- 在表单中填写所有必填字段后删除禁用项
- 取消选中特定复选框时,React切换不删除的选择字段
- 自动进度输入字段删除'0's在Firefox中
- 动态删除没有唯一属性的输入字段
- 登录文本字段和密码字段删除焦点上的文本
- 如何在 Javascript 中按字段删除数组中的重复对象