javascript - e.preventDefault();不停止表单提交

Question

我正在开发一个简单的表单验证脚本，它只是检查字段是否为空(稍后将添加进一步的高级验证)。

但是，在提交时，表单似乎继续提交，即使我正在使用 preventDefault()。有人可以帮我检查我的语法和逻辑，找出问题所在吗？在正常提交表单之前，我得到了验证的闪光。

fiddle :http://jsfiddle.net/qb9KS/1/

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 控制台是否有错误，这将为您节省大量时间和精力。 )