How to use asp.net mvc 3 jquery validate with a jquery dialog that does an ajax submit?

Question

I am using

asp.net mvc 3 jquery validate unobstructive javascript.

I am trying to write all my validation on the serverside through annotations and then have the new feature of mvc 3 take care of the client side.

I have a dialog that has a button on it(just a button not a submit button) that I want to post data to the server through ajax.

So when the user clicks on the button I do a form submit and return false to cancel the post back.

I thought that would trigger the validation but that does not seem to be the case. How do I make the client side validation trigger?

Edit

<form method="post" id="TaskFrm" action="/Controller/Action">

            <input type="text" value="" name="Name" id="Name" data-val-required="Name field cannot be left blank" data-val-length-max="100" data-val-length="task cannot exceed 100 characters" data-val="true">
</form>

var $dialog = $('<div></div>').dialog(
            {
                width: 580,
                height: 410,
                resizable: false,
                modal: true,
                autoOpen: false,
                title: 'Basic Dialog',
                buttons:
                    {
                        Cancel: function ()
                        {
                            $(this).dialog('close');
                        },
                        'Create Task': function ()
                        {
                            var createSubmitFrmHandler = $(my.selectors.createFrm).live('submit', function ()
                            {
                                alert('hi');
                                return false;
                            });

                            createSubmitFrmHandler .validate();
                            var a = createSubmitFrmHandler .valid();

                            alert(a);

                        }
                    }
            });

This always return true.

Edit 2

if I put a submit button within the form it will show the clientside validation(I use jquery to return false as shown in my code).

So this means I do have the scripts and everything but it is not working for unknown reasons when I try to do it programmatic.

Edit 3

I stuck the jquery validate && jquery.validate.unobtrusive files in the master page. But when I stick them in the partial view that contains the fields that get loaded up and then force a submit the validation kicks in.

I don't understand. I pretty sure the pathing is right as I just dragged and dropped the file into my master page and it figured out the path. Having it in the partial views is not really a solution as I going have to do this multiple times and that means every time the partial view loads up I got another copy of these files.

Edit 4

I think it is just the jquery.validate.unobtrusive that needs to be for some reason loaded every time. I am not sure why though.

Ranking

mrgsp.md:8080/awesome/person click on create after click submit – Cherrylchersonese

Answer 1

Something like this should do the trick:

    $("#my-button").click(function (event) {
        event.preventDefault();

        $("#my-form").validate();

        if ($("#my-form").valid()) {
            // ...
        }
    });

Brahmana

I thought that would do the trick as well but I get back true. – Ranking

Same problem as @chobo2. I get back true... What's missing? – Gherlein

Answer 2

The issue may be due to elements being added to the DOM after the unobtrusive script loads initially. You can force it to attach validation handlers the new elements by calling $.validator.unobtrusive.parse("form") after creating the dialog.

$("<div></div>").dialog(...)
$.validator.unobtrusive.parse("form")

This solved our similar issue although we display the form within the dialog.

Poundal

This worked for me (we were pulling in a form by javascript and needed it to be validated on submit). – Thuja

This is exactly what was happening!Thanks so much, took me a week to find out why my forms were returning valid even though there was no content and the properties had been set to 'Required' in the Model – Primarily

Answer 3

$("#my-button").click(function (event) {
    event.preventDefault();

    $.validator.unobtrusive.parse("#my-form");

    if ($("#my-form").valid()) {
        // ...
    }
});

Oversold

Answer 4

This can be done using a feature of ASP.NET MVC called Remote Validation. All you have to do is decorate the property you want validated with a [Remote] attribute passing the name of the method that does the validation and the controller on which it exists.

you can find an example on how How to: Implement Remote Validation in ASP.NET MVC

Coaly

I know about remote validation but I don't think it is what I need. I mean I am checking for if a field is blank or not. I don't think I need do a query to the server for that. If I was looking for duplicate names or something then ya. But not just for blank fields. – Ranking

ok, sorry, it's just that your question is a little ambiguous. – Coaly