CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
Grizzly
Grizzly

Reputation: 5953

Ajax success being called even with validation

On my Create page I have jquery validation along with jquery.ajax.

@Scripts.Render("~/bundles/jqueryval")

$(document).ready(function () {
    var settings = {};
    settings.baseUri = '@Request.ApplicationPath';
    var infoGetUrl = "";
    if (settings.baseUri === "/ProjectName") {
        infoGetUrl = settings.baseUri + "/controllername/create";
    } else {
        infoGetUrl = settings.baseUri + "controllername/create/";
    }

    $("#Create-Btn").on("click",
        function (e) {
            $("form").validate({
                submitHandler: function () {
                    e.preventDefault();

                    $.ajax({
                        method: "POST",
                        url: infoGetUrl,
                        data: $("form").serialize(),
                        success: function (data) {
                            toastr.success("Successfully Created.");
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            var status = capitalizeFirstLetter(textStatus);
                            var error = $.parseJSON(jqXHR.responseText);
                            toastr.error(status + " - " + error.message);
                        }
                    });
                }
            });
        });

    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
});

Now when I initially go to the page, and hit submit (to test out the jquery validation).. I get the success message.. not the error message. The form is not submitting because I am leaving required fields blank.

Any reason on why that is happening?

UPDATE

In controller I now have this:

if (ModelState.IsValid)
{
    //do something
else
{
    return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "Validation Failed");
}

But now, when I try and show the Validation Failed message in my 

var error = $.parseJSON(jqXHR.responseText);
toastr.error(status + " - " + error.message);

I get an invalid character error from the $.parseJSON.. and that is because I am getting returned an entire page of html..

UPDATE

Nevermind, I just deleted the $.parseJSON line.. and replaced error.message with errorThrown from the error function and that worked.

Upvotes: 1

Views: 802

Answers (1)

Chris Pratt
Chris Pratt

Reputation: 239430

Well, this is entirely dependent on your server-side code, which you haven't posted, so it's pretty impossible to say with any certainty what the exact issue is. However, you should bear in mind that for AJAX, success means a 200-family response was returned, while error means the response contained some other family of status codes (400-500 families). Off the top of my head, I'm not actually sure what would occur with a 300-family status code, but I think that would actually hit your success method, too. Don't quote me on that, though.

Regardless, the point is that if you're simply returning a JSON object indicating an error occurred, but still sending the response with 200, that's a success, not an error. There's actually two ways you could view the situation. You could look at the AJAX success/failure as merely an indication of whether the request itself had issues. In that scenario, you would handle validation errors in your "success" callback and use the "error" callback to handle edge-cases, where there server threw a 500, for example. Alternatively, you can look at anything but a 100% successful transaction as an error. Then, your "success" callback would only handle a complete success and your "error" callback would handle all cases where there was some problem, including validation errors. To effect that situation, your server action would need to return something like a 400 Bad Request on validation errors.

Upvotes: 2

Related Questions