Javascript:表单验证-从更正字段中删除错误消息

Javascript: Form Validation - Remove error messages from corrected fields

本文关键字:字段 删除 错误 消息 表单 验证 Javascript      更新时间:2023-09-26

当我提交有错误的表单时(例如用户没有完成必需的字段),我能够显示错误消息。但是,如果我更正其中一个字段并再次提交,两个错误消息仍然存在。

只有当所有字段都正确填写时才会出现错误。

我做错了什么?

如果我更正一个字段并单击提交,则更正字段的错误消息将消失,只有保留的不正确字段才会有错误消息。

HTML:

   <form id="frm1">
   <fieldset id="controls">
    <div>
      <label for="firstname">First Name: </label>
       <input type="text" id="firstname">
        <span id="errFname" class="errmsg">&#42 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">&#42 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...