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

Question

How do I hide the error(s) messages and the red border when a user corrects their errors on my form? At the moment it will keep showing the error(s) until the page is refreshed or submitted.

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;
        }

I really have no idea on how to do this.

Answer 1

Assuming the checkForm function is called each time the form is amended you can include else clauses to reset the style and visible state of the warnings

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

Just add code which clears up the error messages at the beginning of your checkForm() function.

In your current code if error messages had been set once they have no chance to be changed on the correct input.

For example,

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

Well first it would be better to seperate javascript and CSS styles, by applying classes:

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

To apply the style:

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

To remove the style:

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

To hide the warn element use:

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

Beware that classList does not work with ie < 10