Display error message in jQuery popup or in alert in MVC 4

Question

Am using DataAnnotation for validation, I want to show the error message(Data annotation) in a pop up (dialog/alert) instead of showing it on view.... I have implemented the code using this link..

Project template is Mobile Let me know if I am missing something ?? http://forums.asp.net/t/1738076.aspx/1

Javascript:-

$('#Test').bind('invalid-form.validate', function (form, validator) {
    alert('InsideTest');   
     var $list = $('#errorlist ul:first')
     if ($list.length && validator.errorList.length) {
            $list.empty();
            $.each(validator.errorList, function () {
                $("<li />").html(this.message).appendTo(list);
            });
            $list.dialog({
                title: 'Please correct following errors:',
            });
 }
});
Forgot to add html...    

About.cshtml :-

@model WRDSMobile.Models.Test

<div id="errorlist" style="display:none"><ul></ul></div>    
@using (Html.BeginForm(null, null, FormMethod.Post, new { name = "Test", id = "Test" }))
{
     @Html.ValidationSummary(true)
     <fieldset>

        <legend>Test</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Age)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Age)
            @Html.ValidationMessageFor(model => model.Age)
        </div>  
            <input type="submit" value="Create" />
    </fieldset>
}

Answer 1

I'm not sure if I understand your question, but you can ajax post to your controller and return a partial view. Then load the partial view into your html element and then pop it up in a dialog box.

 [HttpPost]
    public ActionResult validate(string firstName,string lastName){

        //logic here for validation
         return PartialView();
    }


$.ajax({
            type: "POST",
            data: {firstName: nameVal, lastName: lastNameVal },
            url: "/myController/validate",
            dataType: "html",
            success: function (data) {
                if (data) {
                    var dialog = $('<div></div>');
                    dialog.html(data);
                    dialog.dialog({
                        resizable: false,
                        modal: true,
                        overflow: false,
                        maxWidth: 1200,
                        maxHeight: 600,
                        width: 1200,
                        height: 600,
                        border: 0,
                        buttons: {
                            "Cancel": function () { //cancel
                                $(this).dialog("close");
                            }
                        }

                    });
                }
                else {
                    alert("error");

                }
            }
        });