错误更正后无法隐藏innerHTML

Question

没找到答案，所以去了。 错误消息正在使用innerHTML。 纠正错误后，如何使它们消失？ 现在，它保持不变。 我尝试在脚本顶部重置。

的jsfiddle

HTML：

<form id="contact" name="contact" onsubmit="return validateFormOnSubmit(this)" action="" method="post">
            <h2>Contact Me</h2>
    <div id="main-error"></div>     
    <div>
                <label>Name</label>
                <input placeholder="First Name" type="text" name="name" id="name" tabindex="1" autofocus />
                <div id="name-error"></div>
            </div>

            <div>
                <label>Email</label>
                <input placeholder="Email" type="email" name="email" id="email" tabindex="3" autofocus />
                <div id="email-error"></div>
            </div>

            <div>
                <label>Phone</label>
                <input placeholder="Phone" type="text" name="phone" id="phone" tabindex="4" autofocus />
                <div id="test"></div>
            </div>

            <div>
                <button type="submit" name="submit" id="submit" tabindex="5">Send</button>
            </div>

        </form>

JS：

document.getElementById('name-error').innerHTML='';
document.getElementById('email-error').innerHTML='';
document.getElementById('phone-error').innerHTML='';

function validateFormOnSubmit(contact) { 
    var reason = "";

  reason += validateEmail(contact.email);
  reason += validatePhone(contact.phone);
  reason += validateEmpty(contact.name);

  if (reason != "") {
    document.getElementById("main-error").innerHTML="Test main error message area";
    return false;
  }

  return false;
}

// validate required fields
function validateEmpty(name) {
    var error = "";

    if (name.value.length == 0) {
        name.style.background = 'Yellow'; 
        document.getElementById('name-error').innerHTML="The required field has not been filled in";
    } else {
        name.style.background = 'White';
    }
    return error;   
}


// validate email as required field and format
function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
} 

function validateEmail(email) {
    var error="";
    var temail = trim(email.value);                        // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    if (email.value == "") {
        email.style.background = 'Yellow';
        document.getElementById('email-error').innerHTML="Please enter an email address.";
    } else if (!emailFilter.test(temail)) {              //test email for illegal characters
        email.style.background = 'Yellow';
        document.getElementById('email-error').innerHTML="Please enter a valid email address.";
    } else if (email.value.match(illegalChars)) {
        email.style.background = 'Yellow';
        document.getElementById('email-error').innerHTML="Email contains invalid characters.";
    } else {
        email.style.background = 'White';
    }
    return error;
}

// validate phone for required and format
function validatePhone(phone) {
    var error = "";
    var stripped = phone.value.replace(/[\(\)\.\-\ ]/g, '');     

   if (phone.value == "") {
        document.getElementById('test').innerHTML="Please enter a phone number"; 
        phone.style.background = 'Yellow';
    } else if (isNaN(parseInt(stripped))) {
        document.getElementById('test').innerHTML="The phone number contains illegal characters.";
        phone.style.background = 'Yellow';
    } else if (!(stripped.length == 10)) {
        document.getElementById('test').innerHTML="The phone number is too short.";
        phone.style.background = 'Yellow';
    } 
    return error;
}

谢谢！

Answer 1

function validateFormOnSubmit(contact) { 
    reason = "";
 reason += validateEmpty(contact.name);
  reason+= validateEmail(contact.email);


    reason+= validatePhone(contact.phone);

    console.log(reason);
  if ( reason.length>0 ) {

    return false;
  }

    else {
        return true;
    }


}

// validate required fields
function validateEmpty(name) {
    var error = "";

    if (name.value.length == 0) {
        name.style.background = 'Yellow'; 
        document.getElementById('name-error').innerHTML="The required field has not been filled in";
        var error = "1";
    } else {
        name.style.background = 'White';
        document.getElementById('name-error').innerHTML='';
    }
    return error;   
}


// validate email as required field and format
function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
} 

function validateEmail(email) {
    var error="";
    var temail = trim(email.value);                        // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    if (email.value == "") {
        email.style.background = 'Yellow';
        document.getElementById('email-error').innerHTML="Please enter an email address.";
        var error="2";
    } else if (!emailFilter.test(temail)) {              //test email for illegal characters
        email.style.background = 'Yellow';
        document.getElementById('email-error').innerHTML="Please enter a valid email address.";
        var error="3";
    } else if (email.value.match(illegalChars)) {
        email.style.background = 'Yellow';
        var error="4";
        document.getElementById('email-error').innerHTML="Email contains invalid characters.";
    } else {
        email.style.background = 'White';
        document.getElementById('email-error').innerHTML='';
    }
    return error;
}

// validate phone for required and format
function validatePhone(phone) {
    var error = "";
    var stripped = phone.value.replace(/[\(\)\.\-\ ]/g, '');     

   if (phone.value == "") {
        document.getElementById('test').innerHTML="Please enter a phone number"; 
        phone.style.background = 'Yellow';
       var error = '6';
    } else if (isNaN(parseInt(stripped))) {
        var error="5";
        document.getElementById('test').innerHTML="The phone number contains illegal characters.";
        phone.style.background = 'Yellow';
    } else if (stripped.length < 10) {
        var error="6";
        document.getElementById('test').innerHTML="The phone number is too short.";
        phone.style.background = 'Yellow';
    } 

    else {
       phone.style.background = 'White';
        document.getElementById('test').innerHTML='';
    }
    return error;
}

http://jsfiddle.net/tX5y5/59/

我刚刚更改了内部html清洁的位置...，并且在整个验证中添加了一些更改（之前未正常运行）。

Answer 2

您需要在用户更改您的输入字段之一时注册一个侦听器，并在该侦听器中运行验证功能。 像这样：

document.getElementById('name').addEventListener("change", validateFormOnSubmit);
document.getElementById('email').addEventListener("change", validateFormOnSubmit);
document.getElementById('phone').addEventListener("change", validateFormOnSubmit);

如果可能的话，我建议您使用现有的库进行表单验证（但您可能已经知道这一点）。