javascript - 提交时的文本框被删除了吗？

Question

这个问题已经有答案了:

How to show a required message next to input with Javascript? [duplicate] (2 个回答)

已关闭 9 年前。

我正在尝试删除 <span class="reqMsg">* Email is required</span如果通过，则提交。例如，如果第一个字段框中未输入任何内容，则会显示错误，如果显示了某些内容，如何使错误消失？

My JSFIDDLE :

MY JS:

function elem(id) {
    return document.getElementById(id);
};


window.onload = function () {
    document.querySelector("#RadioGroup1_0").click();


    var form = document.getElementById('form');
    form.onsubmit = function (e) {
        var rules = [
        ['first-name', elem('first-name').value.length > 0],
        ['last-name', elem('last-name').value.length > 0],
        ['email', elem('email').value.length > 0 && /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(elem('email').value)],
        ['phone', elem('phone').value.length > 7 && elem('phone').value.length < 11 && /^(\+\d{1,2})?[\d ()-]+$/.test(elem('phone').value)]

    ];

    function myFunction()
{
document.getElementById("myForm").reset();
}

        function alpha(e) {
            var k;
            document.all ? k = e.keyCode : k = e.which;
            return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8);
        }

        var valid = true;
        var firstFocus = null;
        for (var i = 0; i < rules.length; i++) {
            if (!rules[i][1]) {
                valid = false;
                var parent = elem(rules[i][0]).parentNode;
                parent.children[2].style.display = "inline";
                if (firstFocus == null) firstFocus = parent.children[1];
            }
        }
        if (!valid) {
            firstFocus.focus();
            return false;
        }
        return true;
    };
}


function onlyAlphabets(e, t) {
    try {
        if (window.event) {
            var charCode = window.event.keyCode;
        } else if (e) {
            var charCode = e.which;
        } else {
            return true;
        }
        if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode === 8)) return true;
        else return false;
    } catch (err) {
        alert(err.Description);
    }
}


var specialKeys = new Array();
specialKeys.push(8); //Backspace
function IsNumeric(e) {
    var keyCode = e.which ? e.which : e.keyCode
    var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
    //document.getElementById("phone").style.display = ret ? "none" : "inline";
    return ret;
}

//var valid = email.match(/^[a-zA-Z0-9\.]+@([a-zA-Z0-9\.-]){1,}\.[a-z]{2,4}$/);

Answer 1

在form.onsubmit成功的return true语句之前，插入以下行

document.querySelector(".reqMsg").style.display = "none";

它将隐藏错误消息。

如果你想隐藏所有错误消息

var errorMessages = document.querySelectorAll(".reqMsg");
for(var dom in errorMessages) { 
  errorMessages[dom].style.display = "none";
}

如果您还想清除错误消息，请使用

document.querySelector(".reqMsg").innerHTML = ""

对于单个字段验证:

 for (var i = 0; i < rules.length; i++) {
            var parent = elem(rules[i][0]).parentNode;
            if (!rules[i][1]) {
                valid = false;
                parent.children[2].style.display = "inline";
                if (firstFocus == null) firstFocus = parent.children[1];
            } else {
                parent.children[2].style.display = "none";
            }

        }

希望它对你有用:)