[Solved] Broken client validation with Telerik MVC Window

[David]

So I have spent about 2 hours looking into this issue and there seems to be no conclusive fix for resolving this problem. Can someone FROM TELERIK come on this forum and give me, and the other users of their product a correct and thorough explanation of WHY client validation does not work out of the box in ASP.NET MVC. It would also be nice to have a CLEAR THOROUGH tip on how to get around this limitation.

If you guys at telerik cannot do that then I will have to have my company take its money elsewhere.

[Atanas Korchev]

Hello David,

You can see client-side validation working in Telerik Mvc Window here (check the "popup mode" radio button and click the "Apply" button). There are a few cases which can cause client-side validation not to work:

1. The required JavaScript files are not loaded
2. You are loading the contents of the window on demand (with Ajax). Sometimes the validation script simply does not work in such cases. I would like to emphasize that this is not related with Telerik Window but with ASP.NET MVC validation.

In order to help you please send us a sample project which shows how validation fails in your case. We will check it out and help you enable it properly.

Regards,
Atanas Korchev
the Telerik team

[Roman]

I've reproduced this bug too.
Client validation doesn't work on popup window.
But it does work on grid popup window in your demo

[Atanas Korchev]

Hello,

 I am attaching a sample application showing how to use validation inside Telerik Window for ASP.NET MVC.

I hope this helps,
Atanas Korchev
the Telerik team

[David]

While this method you have posted may work, it does require the developer include the Microsoft AJAX libraries. Instead of using the jQuery client validation which is enabled with ASP.NET MVC 3.

Another way to get the client side validation to be re-enabled after loading your new form using AJAX is to invoke

jQuery.validator.unobtrusive.parse(<selector>)

where <selector> is the jQuery selector that identifies all the forms which need to have their validation attributes parsed. PLEASE KEEP IN MIND that this code needs to be invoked AFTER YOUR FORM HAS BEEN INSERTED INTO THE DOM. the best place to do this if your using a Ajax.ActionLink() or Ajax.BeginForm() is in the completetion handler of the AjaxOptions; as this event handler is guaranteed to be invoked after all the html has been received from the server and inserted into the DOM.

[Nick]

@David - Do you by chance have a working example how to get this to work utilizing the jQuery.validator.unobtrusive.parse(<selector>)
 call?  I am not able to get it to work despite your advice.

Thanks

[mark]

I create a window via Javascript ( $.telerik.window.create({...}) ) and was wondering what steps are necessary to get client side validation working?  Is there a preferred approach from Telerik?  I tried including the script files and using the jQuery.validator.unobtrusive.parse(<selector>), but was unsuccessful.  Client validation does work in a Grid popup, so I guess things are configured properly.  

Any help appreciated.  Thanks.

[David]

Assuming you already have your form loaded into the window. you would do the following

Given your form has the id "myAjaxForm" (without quotes)

1) define a javascript function, we will assume it is called enableClientValidation for our purposes here

function enableClientValidation() {
    jQuery.validator.unobtrusive.parse('#myAjaxForm');
}

2) now we need to find the right place to execute this js function.

A) the easiest solution would be to set the AjaxOptions.OnSuccess property to "enableClientValidation". This would ensure that the function is called AFTER the page has been updated. Unfortuantely you would limit you to using the MVC AJAX facility.

B) If you want to use some other AJAX facility (for example jQuery directly via its $.get or $.ajax) to load a form into your page then you will simply need to hook into what ever callback your favorite AJAX library has for being notified that your DOM has been successfully updated with the requested form.

You are by no means limited to specifying an ID with your ajax loaded form. In my app I have defined an attribute which all the forms that are loaded via ajax are tagged with:

<form action="..." ajax-loaded> ... </form>

once this is done I can simply redefine enableClientValidation as follows

function enableClientValidation() {
    jQuery.validator.unobtrusive.parse('form[ajax-loaded]');
}

the only thing I have changed is the jQuery selector which will now parse the validation for all forms in the DOM that have the ajax-loaded attribute no matter what value that attribute set to.

[mark]

David,

Wow, thanks for the quick response, I'll give it a try this weekend.  Would there be any problem calling the "jQuery.validator.unobtrusive.parse" function when the jquery "document ready" fires for my window?

 

[Kiran]

Hello, 
I'm also having issues with client side validation on a popup window. I ran the attached above sample. Even that has a problem. The validations doesn't kick off instantly. The popup form closes and then when I click on the button, I see the validation messages. 
In my case, I'm loading the content from a controller action. 

Thanks,
Kiran 

[Daniel]

Hello Kiran,

I am not sure if I understand correctly the problem you are experiencing. Could you provide some code or a runnable project so I can check the setup?
I can also suggest to check the Common Validation Problems code-library which has information and solutions for the most common problems.

Regards,
Daniel
the Telerik team