CODEWITHSUNDEEP
javascriptjquery
user636859
user636859

Reputation:

JavaScript -- not validating for blank fields

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.

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>

Upvotes: 0

Views: 38

Answers (2)

Jan K
Jan K

Reputation: 375

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.

Upvotes: 1

JSP64
JSP64

Reputation: 1462

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

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

Upvotes: 1

Related Questions