Question

我正在开发一个简单的表单验证脚本，它只是检查字段不是空的（稍后会添加进一步的高级验证）。

但是，在提交时，表单似乎仍在继续提交，即使我使用的是preventDefault()。有人可以帮我检查一下我的语法和逻辑，弄清楚出了什么问题？在表格正常提交之前，我得到了验证的快照。

HTML

<form id="userForm" method="POST" action="form-process.php">
    <div>
        <fieldset>
            <legend>User Information</legend>

            <div id="errorDiv"></div>

            <label for="name">Name:*</label>
            <input type="text" id="name" name="name" />
            <span class="errorFeedback errorSpan" id="nameError">Name is required</span>

            <br />

            <label for="city">City:</label>
            <input type="text" id="city" name="city" />

            <br />

            <label for="state">State:</label>
            <select id="state" name="state">
                <option></option>
                <option>Alabama</option>
                <option>California</option>
                <option>Colorado</option>
                <option>Florida</option>
                <option>Illinois</option>
                <option>New Jersey</option>
                <option>New York</option>
                <option>Wisconsin</option>
            </select>

            <br />

            <label for="zip">ZIP:</label>
            <input type="text" id="zip" name="zip" />

            <br />

            <label foe="email">Email Address:*</label>
            <input type="text" id="email" name="email" />
            <span class="errorFeedback errorSpan" id="emailError">Email is required</span>

            <br />

            <label for="phone">Telephone Number:</label>
            <input type="text" id="phone" name="phone" />
            <span class="errorFeedback errorSpan" id="phoneError">Format: xxx-xxx-xxxx</span>

            <br />

            <label for="work">Number Type:</label>
            <input class="radioButton" type="radio" name="phoneType" id="work" value="work" />
            <label class="radioButton" for="work">Work</label>
            <input class="radioButton" type="radio" name="phoneType" id="home" value="home" />
            <label class="radioButton" for="home">Home</label>
            <span class="errorFeedback errorSpan" id="phonetypeError">Please choose an option</span>

            <br />

            <label for="password1">Password:*</label>
            <input type="password" id="password1" name="password1" />
            <span class="errorFeedback errorSpan" id="password1Error">Password required</span>

            <br />

            <label for="password2">Verify Password:*</label>
            <input type="password" id="password2" name="password2" />
            <span class="errorFeedback errorSpan" id="password2Error">Passwords don't match</span>

            <br />

            <input type="submit" id="submit" name="submit">
        </fieldset>
    </div>
</form>

的Javascript

$(document).ready(function() {
$("#userForm").submit(function(e) {
    removeFeedback();
    var errors = validateForm();
    if (errors == "") {
        return true;
    }
    else {
        provideFeedback(errors);
        e.preventDefault();
        return false;
    }
});

function validateForm() {
    var errorFields = new Array();
    if ($('#name').val() == "") {
        errorFields.push('name');
    }
    if ($('#email').val() == "") {
        errorFields.push('email');
    }
    if ($('#password1').val() == "") {
        errorFields.push('password1');
    }
    return errorFields;
}

function provideFeedback(incomingErrors) {
    for (var i = 0; i < incomingErrors.length; i++) {
        $("#" + incomingErrors[i]).addClass("errorClass");
        $("#" + incomingErrors[i] + "Error").removeclass("errorFeedback");
    }
    $("#errorDiv").html("Errors encountered");
}

function removeFeedback() {
    $("#errorDiv").html("");
    $('input').each(function() {
        $(this).removeClass("errorClass");
    });
    $('.errorSpan').each(function() {
        $(this).addClass("errorFeedback");
    });
}
});

Answer 1

应该是......

$("#" + incomingErrors[i] + "Error").removeClass("errorFeedback");

......相反。由于jQuery对象没有removeclass方法（并且案例在JS中很重要），因此该函数失败并显示错误，并且不会调用e.preventDefault()和return false行。

底线：始终检查JS控制台是否存在错误，它会为您节省大量时间和精力。）

Answer 2

尝试检查array.length而不是=

$(document).ready(function() {

    $("#userForm").submit(function(e) {

      if (errors.length >0) {
            return true;
       }
    }

}

您在removeClass

中也输错了错误

$("#" + incomingErrors[i] + "Error").removeClass("errorFeedback");

e.preventDefault（）;不停止表单提交

2 个答案: