Client side validations with MVC 3 don't work

[Juan Pablo]

I am getting the following error every time I try to update or edit a row in the Grid (IE and FF):

$.validator.methods[method] is undefined

$.validator.methods[method] is undefined

http://localhost:56308/Scripts/jquery.validate.min.js

Line 15

Chrome gives me the following error:

1. Uncaught TypeError: Cannot call method 'call' of undefined
   1. $.extend.checkjquery.validate.min.js:16
   2. $.extend.checkFormjquery.validate.min.js:15
   3. $.extend.formjquery.validate.min.js:15
   4. $t.editing.implementation.savetelerik.grid.editing.js:530
   5. $t.editing.initialize.grid.errorViewtelerik.grid.editing.js:221
   6. $t.$.telerik.stopAlltelerik.common.js:64
   7. Gajquery-1.4.3.min.js:18
   8. c.event.handlejquery-1.4.3.min.js:63
   9. c.event.add.h.handle.n

My model is the following:

    public class AccessDay
    {
        [ScaffoldColumn(false)]
        public Int32 ID { get; set; }


        [RequiredAttribute(ErrorMessage = "The Name field is required.")]
        [StringLength(150)]
        public String Name { get; set; }
}

I am using MVC 3 beta and the beta Q3. I already tried putting the jquerry.validate.min.js found in the telerik installation folder in the my app script folder. Any suggestions on how to solve this error?

Thank you!

    public class AccessDay

    {

        [ScaffoldColumn(false)]

        public Int32 ID { get; set; }

    public class AccessDay

    {

        [ScaffoldColumn(false)]

        public Int32 ID { get; set; }

        [RequiredAttribute(ErrorMessage = "The Name field is required.")]

        [StringLength(150)]

        public String Name { get; set; }

        [RequiredAttribute(ErrorMessage = "The Name field is required.")]

        [StringLength(150)]

        public String Name { get; set; }

[Rosen]

Hello Juan,

Indeed,  I was able to observe the error you have described. It is cause by changes made to MVC3 validation which conflicts with Grid's current validation implementation. However, I'm  happy to inform you, that we have managed to address this shortcoming and the scenario in question will be supported with Q3 2010 version of our grid extension.

Meanwhile, in order to use MVC3's unobtrusive validation you should manually include the jquery.validate.unobtrusive.js :

<%= Html.Telerik().ScriptRegistrar().DefaultGroup(group =>                   group.Add("jquery.validate.js").Add("jquery.validate.unobtrusive.js"))
%>

and parse the form element when grid is switch to edit mode:

     <%=Html.Telerik().Grid(Model)
                .Name("Grid")
                //.....
                .ClientEvents(clientEvents =>                   clientEvents.OnEdit("onEdit"))
%>

<script type="text/javascript">
    function onEdit(args) {
        $.validator.unobtrusive.parse(args.form);
    }
</script>

All the best,
Rosen
the Telerik team

[Juan Pablo]

That worked! Thank you very much!

[Victor]

Thank you for that solution - was something we had problems with as well.

However - given the brand new release (2010.3), how are you supposed to implement this? Sure - validation works out of the box, but we cant get any error message printed without the code you posted. Is there any way to make that happen without having to customize every grid as you suggested as a workaround?

Also - the validationsummary would be interesting to have (something that was mentioned in another thread but not resolved as far as we could see.)

Thanks
Victor Ström

[Rosen]

Hi Victor,

Can you please verify that you are using the Telerik.Web.Mvc assembly which do reference MVC3, the version number should end with .340. Also please note that we have made few updates to the unobtrusive validation support which will be available with the next internal build, therefore make sure you try it out too.

Best wishes,
Rosen
the Telerik team

[Victor]

The version we have referenced is 2010.3.1110.340.

We have also looked at the generated markup with Firebug - even though the input is validated (and the text-box gets the error css class), there are no error description markup output at all as far as we can see.

Kind regards
Victor Ström

[Rosen]

Hello Victor,

Can you please send us a small runnable application in which the behavior can be observed?

All the best,
Rosen
the Telerik team

[Victor]

Hi,

Attached is a small test program where this behaviour can be observed. To reproduce:
* Compile and run
* Press the "Grid" link
* Press insert
* Type "asd" in "English name" textbox and press insert
* The textboxes that have errors turns red, but no text is shown
* The ajax reply shows the errors:

"modelState":{"Alpha2":{"errors":["The Alpha2 field is required."]},"Alpha3":{"errors":["The Alpha3 field is required."]},"English":{"errors":["English name should be 6-30 characters long"]},"Swedish":{"errors":["Name is required"]}}

Edit: Ehm... Attached the solution...

/Victor

[Rosen]

Hi Victor,

It seems that you have missed to attached the sample.

Greetings,
Rosen
the Telerik team

[Victor]

Sorry, added now
/Victor

[Rosen]

Hello Victor,

I'm afraid that I'm still unable to find the attachment. Can you please re-attach it again?

Regards,
Rosen
the Telerik team

[Victor]

Ok... I attached it to the origianl post, but here goes again.

/Victor

[Rosen]

Hi Victor,

I have looked at the project you have sent us and it seems that the behavior you are experiencing is due to the fact that you have an incorrect (old) debug version of the telerik.grid.editing file included in the project. Therefore, please remove it and leave the .min version, as it is the correct one.

Kind regards,
Rosen
the Telerik team

[Victor]

Hi Rosen,

That indeed seems to have been the problem. After removing all but the latest minified script files everything works as it should - perfect! Just one more question that I dont think you answered - is it possible to get a validation summary as well at this time?

/Victor

[Rosen]

Hello Victor,

I'm afraid that currently validation summary is not supported.

Regards,
Rosen
the Telerik team