Question

当我提交有错误的表单时（例如用户尚未完成必填字段）我能够显示错误消息。但是，如果我更正其中一个字段并再次提交BOTH错误消息仍然存在。

只有在正确填写所有字段时才会出现错误。

我做错了什么？

如果我更正某个字段并单击“提交”，则表示已更正字段的错误消息将消失，只有提醒错误字段才会显示错误消息。

HTML：

$(document).ready(function (){      

    $('#cart').click(function (e1) {
        var data = $('[data-field-of=form1]').serialize();
        $.ajax({
            url: "post/url",
            data: data,
            type: "POST",
            success: function(response){ /* handle success */ },
            error: function(){ /* handle error */ }
        });
    });
});

SCRIPT：

   <form id="frm1">
   <fieldset id="controls">
    <div>
      <label for="firstname">First Name: </label>
       <input type="text" id="firstname">
        <span id="errFname" class="errmsg">&#42 You must enter a first name</span>
    </div>
    <div>
       <label for="lastname">Last Name: </label>
       <input type="text" id="lastname">
        <span id="errLname" class="errmsg">&#42 You must enter a first name</span>
    </div>
    <div>
      <input type="submit" value="Submit">
    </div>
    </fieldset>
   </form>

Answer 1

您必须先清除调用checkForm时的所有错误。

function checkForm() {
    clearErrors();

    Rest functionality same...
}

function clearErrors() {
    Array.prototype.forEach.call(
        document.getElementsByClassName("errmsg"),
        function(el) { el.style.display = "none"; }
    );
}

这将首先清除所有错误，然后仅显示尚未解决的错误。

Answer 2

在进行验证之前，解决方案将每个错误消息显示属性设置为“无”。

function checkForm() {

        //Event listener
        document.getElementById("contactForm").addEventListener("submit", function(prevent) {

//Set display property for inline error messages to none
            document.getElementById("errFname").style.display = 'none';
            document.getElementById("errLname").style.display = 'none';

//Rest of code remains the same...

Javascript：表单验证 - 从更正的字段中删除错误消息

2 个答案: