1

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

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

小提琴：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");
    });
}
});
4

2 回答 2

4

它应该是...

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

... 反而。由于 jQuery 对象没有removeclass方法（并且大小写在 JS 中很重要），因此该函数失败并出现错误，并且既不调用e.preventDefault()也不return false调用行。

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

于 2013-10-29T16:27:22.210 回答
0

尝试检查array.length而不是=

$(document).ready(function() {

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

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

}

你也输入错误removeClass

$("#" + incomingErrors[i] + "Error").removeClass("errorFeedback");
于 2013-10-29T16:17:50.173 回答