Javascript/jQuery 表单验证

Question

我让大部分表单验证都能正常工作，但唯一的问题是，当表单在提交时检测到错误并且用户更正错误时，错误文本不会消失。这可能会让用户感到困惑，但我似乎无法找到一种方法来使错误文本以我这样做的方式消失。我也知道我可以选择 PHP 验证，但我想使用此前端验证有几个原因。这是表单的完整验证脚本。提交部分位于底部:

JavaScript/jQuery

    var valid = 0;

    function checkName(elem) {

        //gather the calling elements value
        var val = document.getElementById(elem.id).value;
        //Check length
        if (val.length<1) {
            document.getElementById("errorName").innerHTML = "<span>Don't forget your name.</span>";

        } else if (val.length>40){
            document.getElementById("errorName").innerHTML = "<span>This doesn't look like a name.</span>";
        //If valid input increment var valid.
        } else {
            document.getElementById("errorName").innerHTML = "";
            valid++;

        }
    }

    function checkEmail(elem) {

        var val = document.getElementById(elem.id).value;
        //Check email format validity
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if (!re.test(val)) {
            document.getElementById("errorEmail").innerHTML = "<span>Please enter a valid email.</span>";
        } else {
            document.getElementById("errorEmail").innerHTML = "";
            valid++;
        }
    }

    function checkMessage(elem) {

        var val = document.getElementById(elem.id).value;

        if (val.length<1) {
            document.getElementById("errorMessage").innerHTML = "<span>It looks like you forgot the message.</span>";

        } else if (val.length>2000) {
            document.getElementById("errorMessage").innerHTML = "<span>It looks like your message is too long.</span>";

        } else {
            document.getElementById("errorMessage").innerHTML = "";
            valid++;    
        }

    }


//Contact: jQuery check for null/empty/errors
$(document).ready(function() {

function checkSubmit() {
    if (valid == 3) {
        document.getElementById("errorSubmit").innerHTML = "";
    }
}

//If errors when submitting display message

$('#form13').submit(function(submit) {
    if ($.trim($("#name").val()) === "" || $.trim($("#email").val()) === "" || $.trim($("#message").val()) === "") {
        document.getElementById("errorSubmit").innerHTML = "<span>Please fill out all the form fields.</span>";
        submit.preventDefault();
    } else if (valid < 3) {
        document.getElementById("errorSubmit").innerHTML = "<span>Please check the errors above.</span>";
        submit.preventDefault();
    }
  })
});

HTML 表单

 <div class="row"> 
            <div class="col-md-8 col-md-offset-2"> 
                <div class="cform" id="contact-form"> 
                    <form id="form13" name="form13" role="form" class="contactForm" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate
  action="https://Some3rdPartyPOSTService"> 
                        <div class="form-group"> 
                            <label for="name">Your Name</label>                                 
                            <input type="text" name="Field1" class="form-control" id="name" placeholder="Tony Stark" onblur="checkName(this)"/>
                            <span id="errorName" style="margin-left:10px;"></span>                                                              
                        </div>                             
                        <div class="form-group"> 
                            <label for="email">Your Email</label>                                 
                            <input type="email" class="form-control" name="Field4" id="email" placeholder="" data-rule="email" data-msg="Please enter a valid email" onblur="checkEmail(this)"/>
                            <span id="errorEmail" style="margin-left:10px;"></span>                                  
                        </div>                                                     
                        <div class="form-group"> 
                            <label for="message">Message</label>                                 
                            <textarea class="form-control" name="Field3" id="message" rows="5" data-rule="required" data-msg="Please write something here" onblur="checkMessage(this)"></textarea>  
                            <span id="errorMessage" style="margin-left:10px;"></span>                                
                        </div>
                        <span id="errorSubmit" style="margin-left:10px;"></span>
                        <button type="submit" class="btn btn-theme pull-left">SEND MESSAGE</button>
                    </form>                         
                </div>                     
            </div>                 
            <!-- ./span12 -->                 
        </div>             
    </div>         
</section>     

Answer 1

只需检查 onChange 事件回调，如果:

var x = getElementById("formid"); //  then add a listener     
x.addEventListener('change', function () {

   callback with your code that examines the form

});

或者监听特定的文本框更改事件，这将是最简单的方法，并寻找一种在不满足条件时禁用提交的方法。