CODEWITHSUNDEEP
asp.net-mvc-3validationjquery-dialog
shennyL
shennyL

Reputation: 2794

MVC 3 Client side validation on jQuery dialog

I am showing lots of form using jquery dialog and I wish to add in client side validation on it. I read through some examples, saying that mvc 3 already somehow support jquery client side validation, but I tried by including the necessary script, and my form like this:

 @using (Html.BeginForm("CreateFood", "Home", FormMethod.Post, new { id = "formData" }))
       {
           @Html.ValidationSummary(false, "Please fix these errors.")

When i try to submit my form without fill in the required field, I still dint get any message. Can anyone give me more idea / explanation / examples on this??

Really needs help here... Thanks...

UPDATE (add in the script for my dialog)

 $createdialog.dialog("option", "buttons", {
        "Cancel": function () {
            //alert('Cancel');
            $createdialog.dialog('close');

        },
        "Submit": function () {

            var frm = $('#formData');
            $.ajax({
                url: '/Food/CreateFood',
                type: 'POST',
                data: frm.serialize(),
                success: $createdialog.dialog('close')
            });
        }
    });

Once dropped, open dialog:

  // Once drop, open dialog to create food
    options.drop = function (event, ui) {
        // Get the ContainerImgName which food dropped at
        var cimg = $(this).attr('id');
        // Pass in ContainerImgName to retrieve respective ContainerID
        // Once success, set the container hidden field value in the FoodForm
        $.ajax({
            url: '/food/getcontainerid',
            type: 'GET',
            data: { cImg: cimg },
            success: function (result) { $('#containerID').val(result); }
        });
        clear();
        $.validator.unobtrusive.parse($createdialog);
        $createdialog.dialog('open');
    };

Upvotes: 3

Views: 6267

Answers (2)

BigMike
BigMike

Reputation: 6863

I've faced the same problem, solved with:

 $(name).dialog({
            autoOpen: true,
            width: options.witdth,
            heigth: options.height,
            resizable: true,
            draggable: true,
            title: options.title,
            modal: true,
            open: function (event, ui) {
                // Enable validation for unobtrusive stuffs
                $(this).load(options.url, function () {
                    var $jQval = $.validator;
                    $jQval.unobtrusive.parse($(this));
                });

            }
        });

of course you can add the validation on the close event of the dialog, depends on what you're doing, in my case the popup was just for displaying errors so I've performed validation on load of the content. (this pop up is displaying am Action result)

Upvotes: 6

Darin Dimitrov
Darin Dimitrov

Reputation: 1038720

For every dynamically generated form you need to manually run the validator once you inject this content into the DOM as shown in this blog post using the $.validator.unobtrusive.parse function.

Upvotes: 1

Related Questions