Javascript：表单验证 - 从更正的字段中删除错误消息答案

【问题标题】：Javascript: Form Validation - Remove error messages from corrected fieldsJavascript：表单验证 - 从更正的字段中删除错误消息
【发布时间】：2015-07-20 10:28:41
【问题描述】：

当我提交有错误的表单时（例如用户没有填写必填字段），我能够显示错误消息。但是，如果我更正其中一个字段并再次提交，则仍然存在两个错误消息。

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

我做错了什么？

如果我更正一个字段并单击提交，我会看到更正字段的错误消息会消失，只有提醒不正确的字段才会有错误消息。

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;

【问题讨论】：

你的alphaRegEx 是错误的，它只验证第一个符号，正则表达式应该是/^[a-zA-Z]+$/
你真的需要停止用“close if”、“close function”等来评论右括号，因为它们是无用的。

标签： javascript forms

【解决方案1】：

调用checkForm时必须先清除所有错误。

function checkForm() {
    clearErrors();

    Rest functionality same...
}

function clearErrors() {
    Array.prototype.forEach.call(
        document.getElementsByClassName("errmsg"),
        function(el) { el.style.display = "none"; }
    );
}

这将首先清除所有错误，然后仅显示尚未解决的错误。

【讨论】：

实际上这似乎可以防止错误消息一起出现。
不，它不会，它会做的是 1) 删除所有消息，2) 检查个别条件并在适用时显示错误消息。
你的想法几乎是正确的，不能工作 ByClassName .. 必须通过 ID 给每个人打电话。它必须跟踪事件侦听器： document.getElementById("frm1").addEventListener("submit", function(e) { document.getElementById("errFname").style.display = 'none'; 现在可以使用.
它应该也可以在 class="errmsg" 中使用，因为所有跨度都具有该类。
@MauriceGreenland Nikhil 的想法是正确的，但是getElementsByClassName 返回一个数组对象，需要循环。我对他的回答进行了修改。

【解决方案2】：

解决方案是在通过验证之前将每个错误消息显示属性设置为“无”。

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...

【讨论】：

getElementsByClassName 更好，因为在您的答案中您与 id 紧密耦合，如果您添加另一个 N 字段，您还需要修改您的 javascript