Question

当用户更正表单上的错误时，如何隐藏错误消息和红色边框？目前，它会一直显示错误，直到刷新或提交页面。

function checkForm() {
            var valid = true;

            if (!retext.test(document.myform.textfield.value)) {
                document.myform.textfield.style.border = "3.5px solid red";
                document.getElementById("text").innerHTML = "Invalid text.";
                document.getElementById("text").style.display = "block";
                valid = false;
            }

            if (!re.test(document.myform.email.value)) {
                document.myform.email.style.border = "3.5px solid red";
                document.getElementById("emailwarn").innerHTML = "Invalid email.";
                document.getElementById("emailwarn").style.display = "block";
                valid = false;
            }

            if (!retel.test(document.myform.tel.value)) {
                document.myform.tel.style.border = "3.5px solid red";
                document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
                document.getElementById("telwarn").style.display = "block";
                valid = false;
            }

            return valid;
        }

我真的不知道如何做到这一点。

Answer 1

假设每次修改表单时调用checkForm函数，您可以包含 else 子句来重置警告的样式和可见状态

function checkForm() {
    var valid = true;

    if (!retext.test(document.myform.textfield.value)) {
        document.myform.textfield.border = "3.5px solid red";
        document.getElementById("text").innerHTML = "Invalid text.";
        document.getElementById("text").style.display = "block";
        valid = false;
    } else {
        document.myform.textfield.border = 0;
        document.getElementById("text").style.display = "none";
    }

    if (!re.test(document.myform.email.value)) {
        document.myform.email.style.border = "3.5px solid red";
        document.getElementById("emailwarn").innerHTML = "Invalid email.";
        document.getElementById("emailwarn").style.display = "block";
        valid = false;
    } else {
        document.myform.email.border = 0;
        document.getElementById("emailwarn").style.display = "none";
    }

    if (!retel.test(document.myform.tel.value)) {
        document.myform.tel.style.border = "3.5px solid red";
        document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
        document.getElementById("telwarn").style.display = "block";
        valid = false;
    } else {
        document.myform.tel.border = 0;
        document.getElementById("telwarn").style.display = "none";
    }

    return valid;
}

Answer 2

只需添加代码即可清除checkForm()函数开头的错误消息。

在当前代码中，如果错误消息已设置，则无法在正确的输入上更改错误消息。

例如，

function clearErrors() {
  document.getElementById("text").style.display      = "none";
  document.getElementById("emailwarn").style.display = "none";
  document.getElementById("telwarn").style.display   = "none";
}

function checkForm() {      
  var valid = true;

  clearErrors();

  ...

Answer 3

首先，通过应用类来分离javascript和CSS样式会更好：

input.error {
  border: 3.5px solid red;
}

要应用样式：

document.myform.textfield.classList.add("error");

删除样式：

document.myform.textfield.classList.remove("error");

要隐藏警告元素，请使用：

document.getElementById("telwarn").style.display = "none";

请注意classList不适用于ie＆lt; 10

JavaScript - 如何在表单验证中隐藏错误

3 个答案: