JavaScript - 不验证空白字段

I have the following JavaScript function that is not supposed to allow blank fields to be sent to my back end code, but it's doing it anyway. Even if one or both of my fields is empty, this code is sending 2 blank values. (It works just fine if they're both filled in.) It's also not making my error messages appear. Can anyone help me? Here is my JavaScript.

我有以下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();
}

Here is my form.

这是我的表格。

<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>

2 个解决方案

#1

Your form will submit regardless of the action in your onclick function because the input button type is submit. If you'd like to only submit using your AJAX call, change the input to type="button".

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

Even if you'd like to submit without the ajax call, you can still use type="button" and submit the form using $('#commentForm').submit();

即使你想在没有ajax调用的情况下提交,你仍然可以使用type =“button”并使用$('#commentForm')提交表单.submit();

#2

Your textarea is both self-terminating and has a closing tag. When I tried to run this, that confused it to the point that the onClick of the button was not run.

您的textarea既是自我终止的,也有一个结束标记。当我试图运行它时,将它混淆到按钮的onClick没有运行的程度。

#1