JavaScript——不验证空白字段

Question

我有以下 JavaScript 函数，该函数不应允许将空白字段发送到我的后端代码，但它无论如何都会这样做。即使我的一个或两个字段为空，此代码也会发送 2 个空白值。 (如果它们都填写的话，它就可以正常工作。)它也不会让我的错误消息出现。谁能帮我？这是我的 JavaScript。

function submitForm() {
    var allValid = true;
    var name = $("#name").val();
    var comment = $("#comment").val();
    if (name == null || name.length == 0) {
        allValid = false;
        $("#nameReq").css("visibility", "block");
    } else {
        $("#nameReq").css("visibility", "hidden");
    }
    if (comment == null || comment.length == 0) {
        allValid = false;
        $("#commentReq").css("display", "block");
    } else {
        $("#commentReq").css("display", "hidden");
    }

    if (allValid) {
        clearForm();

        $.ajax({
            type : "post",
            url : "writeComment",
            data : "name=" + name + "&comment=" + comment,
            success : function(response) {
            },
            error : function(error) {
            }
        });

        document.getElementById('submit').disabled = true;
    }
}

function clearForm() {
    $("commentForm").reset();
}

这是我的表格。

<form:form id="commentForm" method="post">
    <table>
        <tr>
            <td>Name:<span style="display: none" id="nameReq">
                <font style="font-weight: bold; color: red; visibility: hidden;">
                <c:out value='Name required' /></font></span><br />
                <input type="text" id="name" maxlength="30" /></td>
        </tr>
        <tr>
            <td>Comment:<span style="display: none" id="commentReq">
                    <font style="font-weight: bold; color: red; visibility: hidden;">
                <c:out value='Comment required' /></font></span><br />
                <textarea id="comment" rows="20" cols="125" /></textarea></td>
        </tr>
        <tr>
            <td><input id="submit" type="submit" value="Submit comment" onClick="submitForm()" /></td>
            <td>&nbsp;</td>
        </tr>
    </table>
</form:form>

Answer 1

无论 onclick 函数中的操作如何，您的表单都会提交，因为输入按钮类型为 submit。如果您只想使用 AJAX 调用提交，请将输入更改为 type="button"。

即使您想在不使用 ajax 调用的情况下提交，您仍然可以使用 type="button" 并使用 $('#commentForm').submit( );