This is a migrated thread and some comments may be shown as answers.

Validators on Kendo UI controls don't work inside a form

6 Answers 469 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
ben
Top achievements
Rank 1
ben asked on 02 Aug 2012, 06:48 PM
Hello there,

I was wondering if there're any extra steps involved to get the validators to work on Kendo UI controls.  I have a Product model with UnitPrice and Quantity properties.  Both properties are decorated with the [Required] attribute.  In addition the Quantity property has [UIHint("Integer")].  Without the UIHint, Html.EditorFor(obj => obj.UnitPrice) will render out a regular textbox and the required-field validator will work just fine. However the NumericTextBox for the Quantity will not perform any required-field validation.  I also attached a sample project with the setup I described.  If anyone could take a quick look and let me know if I'm missing anything simple, I'd appreciate it.

Thank you,

Ben

6 Answers, 1 is accepted

Sort by
0
Brian Roth
Top achievements
Rank 1
answered on 03 Aug 2012, 06:23 PM
Hello,

I found that the jquery validator plugin by default will ignore hidden fields, which I believe are used to hold data for Kendo UI controls.  Turning it off with the code below will make client validation work.  Please advise if this is the proper solution.

Thank you,

<script type="text/javascript">
    $(function () {
        // Make sure hidden fields are not ignored
        var form = $('#myform');
        form.data('validator').settings.ignore = ''; // default is ":hidden".
    });
</script>
0
Brian Roth
Top achievements
Rank 1
answered on 03 Aug 2012, 06:30 PM
Forgot to mention that, in addition to tweaking the validator plugin setting, I had to add the "data-val-required" and "data-val" attributes to the numeric textbox for the validator to work.

@model int?
@{
    Dictionary<string, object> htmlAttributes = new Dictionary<string, object>();
    htmlAttributes["style"] = "width:180px";
    htmlAttributes["data-val-required"] = "the field is required!";
    htmlAttributes["data-val"] = "true";
}
 
@(Html.Kendo().IntegerTextBoxFor(m => m)
          .HtmlAttributes(htmlAttributes)
      .Min(int.MinValue)
      .Max(int.MaxValue)
)
0
Vesselin Obreshkov
Top achievements
Rank 2
answered on 06 Aug 2012, 09:16 PM
What version of jQuery.Validate are you using - 1.8 or 1.9? If you're using 1.9, try to downgrade to 1.8 or 1.8.1. Basically the issue is that starting with jQuery.Validate 1.9.0, hidden inputs are automatically ignored and Kendo (as well as Telerik controls) rely on using hidden inputs to store the actual values of the DropDownLists, ComboBoxes, etc and that is why I prefer to use jQuery.Validate 1.8.1 which can be found here:

http://www.asp.net/ajaxLibrary/CDNjQueryValidate181.ashx
0
PAUL
Top achievements
Rank 1
answered on 21 Aug 2012, 02:49 PM
I have been searching trying to figure this out and found nothing. The code that Brian posted crashes with the js file I am using with Kendo.

$(function () {
        // Make sure hidden fields are not ignored
        var form = $('#myform');
        form.data('validator').settings.ignore = ''; // default is ":hidden".
    });


Can a kendo team person please reply...again this is nowhere to be found in documentation and there are ZERO examples...please advise...

Paul
0
Vesselin Obreshkov
Top achievements
Rank 2
answered on 21 Aug 2012, 04:32 PM
Use jQuery.Validation 1.8 - if that doesn't work then you have some other problem with your code. We are completing a year long dashboard that uses every imaginable Kendo widget (previously Telerik MVC) and HTML form input control and we have absolutely no problems anywhere with anything using jQuery.Validation 1.8. With 1.9 you will run into this problems. Otherwise, you can wait from someone from Telerik to reply (they probably haven't because I'm not lying to you about using 1.8 instead of 1.9). Get it from the link I have provided.
0
PAUL
Top achievements
Rank 1
answered on 21 Aug 2012, 05:18 PM
I don't have 1.9, I just have the script files needed to run Kendo along with the scripts in VS2010. We are not doing an ASP.NET web app either. We are using razor syntax. I have jquery-1.7.min.js and jquery.validate.js

I have downloaded the toolkit you are speaking of before getting Kendo and the readme file isn't very helpful. But it does look like I need to install NuGet just to install the toolkit and that takes some doing where I work. It also talks about ASP.NET web apps. We aren't doing that.

Kendo should be working with validation right out the box. There are no examples and no documentation to describe what needs to be done to acheive this. So very frustrating...
Tags
General Discussions
Asked by
ben
Top achievements
Rank 1
Answers by
Brian Roth
Top achievements
Rank 1
Vesselin Obreshkov
Top achievements
Rank 2
PAUL
Top achievements
Rank 1
Share this question
or