Adding custom JavaScript/jQuery effects to MVC 3 form validation

Question

I am building a large website using asp.net's MVC3. On the login page I'm using the built in functions for unobtrusive javascript validation. All is fine and well but I would like to add some effects to HOW the validation messages appear. (I want a red box slide down underneath the error).

How do I do this? I have been trying to figure out how jquery.validate.unobtrusive.js works but it's all black magic to me and I can't seem to find the code which actually ADDS the message onto the screen.

I would be very grateful for any help! I am quite green in this.

Thanks,

Nieszka

Answer 1

The ValidationSummary is what adds the Errors to the page to be visible after having a server side error. ValidationFor elements provide client side errors.

Both are HTML helpers. You will need to implement your own form of returning errors back to the view or overriding those and showing custom UI elements.

Have a look at jQueryUI for starters.

The truth is every one of us would most likely give you a completely different scenario to implement. But the key element in it all would be jQuery/Ajax/JSON

For example, for me, I include a javascript reference in each of my Views that post for Create or Update

<script src="@Url.Content("~/Scripts/AjaxFormSubmission.js")" type="text/javascript"></script>

That script looks like this:

/// <reference path="jquery-1.7.2.js" />

$("document").ready(function () {

    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                dataType: "json",
                cache: false,
                type: 'POST',
                data: $(this).serialize(),
                beforeSubmit: showProgressStarted(),
                success: function (result) {
                    showSuccessError(result);                             
                }
            });
        }
        return false;
    });
});

I pop up a little "Please wait while your request is processed ..." message when the form is submitted and I show a hidden div on completion that has my JSON success or error message.

JQueryUI Dialog would get you pretty far with this kind of goal.

Here's a sample of one of my Actions that the above script posts to

public JsonResult UpdateRequestStatus(RequestViewModel model) {
    try {
        AttemptUpdateRequestStatus(model);
        return Json(new { Success = true, ResultMessage = "Successfully saved" }, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex) {

        ModelState.AddModelError("", ModelStateErrorUtility.WrapResultMessageForList(ex.Message));
    }
    // this custom function evaluates my ModelState and strips out all the error messages so that I can send them all back as part of my JSON response
    return Json(new { Success = false, ResultMessage = ModelStateErrorUtility.GetModelStateErrors(ModelState) }, JsonRequestBehavior.AllowGet);
}

This is my javascript/jQuery code that shows my custom errors

function showSuccessError(result) {
    $('#resultSpan').html('');
    var headerText;
    if (result.Success) {
        headerText = "Action was successful!";
        $('#resultSpan').append($("<ul id='successMsg' style='list-style: none;' />").append(result.ResultMessage));
    }
    else {
        headerText = "Ooops! There is an Error";
        $('#resultSpan').append($("<ul id='errorMsg' style='list-style: none;' />").append(result.ResultMessage)).addClass("AjaxErrorText").removeClass("AjaxSuccessText");
    }
    showProgressComplete(headerText);
}

This changes the text of "Please wait......" to the actual success or error message

function showProgressComplete(headerText) {
    $('#ajaxResultPopUpHeaderText').html(headerText);
}

Like I said, this is just one man's example. Everyone here will most likely be implementing this differently. It's preference really.