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

7 posts, 0 answers
  1. ben
    ben avatar
    27 posts
    Member since:
    Jun 2008

    Posted 02 Aug 2012 Link to this post

    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
  2. Brian Roth
    Brian Roth avatar
    136 posts
    Member since:
    Oct 2005

    Posted 03 Aug 2012 Link to this post

    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>
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Brian Roth
    Brian Roth avatar
    136 posts
    Member since:
    Oct 2005

    Posted 03 Aug 2012 Link to this post

    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)
    )
  5. Vesselin Obreshkov
    Vesselin Obreshkov avatar
    81 posts
    Member since:
    Jan 2010

    Posted 06 Aug 2012 Link to this post

    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
  6. PAUL
    PAUL avatar
    36 posts
    Member since:
    Aug 2012

    Posted 21 Aug 2012 Link to this post

    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
  7. Vesselin Obreshkov
    Vesselin Obreshkov avatar
    81 posts
    Member since:
    Jan 2010

    Posted 21 Aug 2012 Link to this post

    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.
  8. PAUL
    PAUL avatar
    36 posts
    Member since:
    Aug 2012

    Posted 21 Aug 2012 Link to this post

    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...
Back to Top
UI for ASP.NET MVC is VS 2017 Ready