Using Kendo Validator with MVC Model Properties

21 posts, 0 answers
  1. Steve
    Steve avatar
    60 posts
    Member since:
    Nov 2006

    Posted 23 Jun 2012 Link to this post

    Is there any way to use a Kendo Validator for text fields on a strongly-typed MVC view, but to power it using the attributes from the MVC model?

    For example, given the sample "Change Password" model below:
    ==========================================================
    public class ChangePasswordModel
    {
            [Required]
            [DataType(DataType.Password)]
            [Display(Name = "Current password")]
            public string OldPassword { get; set; }

            [Required]
            [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
            [DataType(DataType.Password)]
            [Display(Name = "New password")]
            public string NewPassword { get; set; }

            [DataType(DataType.Password)]
            [Display(Name = "Confirm new password")]
            [Compare("NewPassword", ErrorMessage = "The new password and confirmation password do not match.")]
            public string ConfirmPassword { get; set; }
    }
    =======================================================

    Is there any way to use a Kendo validator to display the appropriate validation messages for the Property attributes like [Required], [DataType], or [StringLength]?

    Ultimately, this is more about look than functionality. The built-in client validation in MVC is fine, but I would just like to be able to leverage the styles defined in the Kendo theme, since I am using them elsewhere already.

    I believe some or all of this functionality was available for the Telerik MVC Extensions, but I haven't seen anything listed like this for Kendo UI or the Kendo MVC extensions.  Any help would be greatly appreciated.  Apologies if this has already been discussed or answered elsewhere...

    Regards,
    Steve
  2. Saulo
    Saulo avatar
    1 posts
    Member since:
    May 2012

    Posted 26 Jun 2012 Link to this post

    I have the same doubt
  3. Kendo UI is VS 2017 Ready
  4. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 28 Jun 2012 Link to this post

    Hi,

    This validation should be transformed automatically when using Kendo UI for MVC and the form is initialized with the Kendo validator.

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Marcin
    Marcin avatar
    165 posts
    Member since:
    Jan 2011

    Posted 15 Sep 2012 Link to this post

    Is there any example? Demos do not contain razor version of validation, and I would like to see how to do that.
  6. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 19 Sep 2012 Link to this post

    Hello Marcin,

    Currently there aren't any samples available on this topic. If you are using the Kendo MVC Grid or ListView the validator will be initialized automatically. If you need to add enable the validation on a form all you need to is include the kendo.aspnetmvc file and initialize the Kendo validator on the form e.g.

    $("form").kendoValidator();
    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Marcin
    Marcin avatar
    165 posts
    Member since:
    Jan 2011

    Posted 19 Sep 2012 Link to this post

    Which wrappers exactly? I have only few texboxes on page, so I wonder which kendo wrappers I should use?
  8. Dirk
    Dirk avatar
    3 posts
    Member since:
    Sep 2012

    Posted 25 Sep 2012 Link to this post

    We are running into the same problems. Can't get the Validator running based on validation rules defined in the model properties.
    Here is an example what we did: http://jsfiddle.net/vAxg8/
    Would appreciate any help on what's wrong with that code or how Model based validation can work.
  9. Dan
    Dan avatar
    9 posts
    Member since:
    Sep 2012

    Posted 28 Sep 2012 Link to this post

    When I enable the validator on the form element, the style of the validation messages changes in the grid.  They no longer hover, but instead take up space in the grid cell.  If the validator is not explicitly enabled, the default grid validator outputs this additional piece of HTML in the messages:

    <div class="k-callout k-callout-n"></div>

    But if I explicitly enable the validator (which I need to do for some search fields on the page outside of the grid), none of the error messages contain this HTML.  

    I am assuming the validation messages are probably rendered with a template behind the scenes, but I'm not seeing any reference to a template property in the API documentation.  How can I make all validation messages have the same callout look?

    Also - it would be great if this was integrated into an MVC form helper instead of requiring javascript to enable the validator.

    Thanks, DanO

  10. Dan
    Dan avatar
    9 posts
    Member since:
    Sep 2012

    Posted 28 Sep 2012 Link to this post

    I did some javascript debugging, and discovered there is an errorTemplate property on the validator object - not sure why this isn't in the documentation.  Here is the code:

    $("form").kendoValidator({
        errorTemplate: '<div class="k-widget k-tooltip k-tooltip-validation" style="margin:0.5em"><span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div></div>'
      });

    I pulled the template from the kendo.web.min.js.

    Not sure why the default template for the validator is different from the default error template for the Grid.  Would be great if the validator could be enabled through the MVC Helpers instead of having to use the javascript function.

    -DanO
  11. Todd
    Todd avatar
    26 posts
    Member since:
    Sep 2012

    Posted 30 Sep 2012 Link to this post

    @Telerik -

    Please reply to Dirk's post (http://jsfiddle.net/vAxg8), where he's trying to get the validator to use rules that are set on the model.  This is ideal since we could re-use the model for other things like grids, etc.  This would allow you to have one model/validation rule set that could be used either for a grid or for a set of form fields.

    Using trendy HTML5 attributes on a per input field basis is all well and good, but it's not scalable, and it means you might forget to put the attribute on the field.

    Thanks,
    Todd
  12. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 03 Oct 2012 Link to this post

    Hello,

    I am afraid that this is not supported. The validation rules should be added through the attributes.

    Kind regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Dirk
    Dirk avatar
    3 posts
    Member since:
    Sep 2012

    Posted 04 Oct 2012 Link to this post

    Hello Daniel,

    thanks for the reply. What confuses me though is that part of the API:
    http://docs.kendoui.com/api/framework/model#modeldefine

    options.fields.fieldName.validation states that the configuration should work that way: Specifies the validation options which will be used by Kendo Validator.

    Is that an error in the API in that case?

    Cheers
    Dirk
  14. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 09 Oct 2012 Link to this post

    Hello Dirk,

    The documentation is correct. The validation object defined for the fields will be used for the validation by the DataSource and if used in a Grid, by the validator when editing. The model just defines the rules and when is used on its own, there is no one to interpret them.

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Bill
    Bill avatar
    38 posts
    Member since:
    Jun 2010

    Posted 29 Oct 2012 Link to this post



    I can't seem to get the Compare attribute from my view model to work on client side validation. I have an Email and ConfirmEmail field. The required field attribute seesm to working.

        
    <label>
            User Name (Email Address)
        </label><div>
        @(Html.Kendo().AutoCompleteFor(i => i.EmailAddress)
                      .Name("EmailAddress")
                      .Filter("startswith")
                      .Placeholder("User Name")
                )</div>
    </div>
     <div>
         <label>
           Confirm Email Address
        </label><div>
        @(Html.Kendo().AutoCompleteFor(i => i.ConfirmEmailAddress)
                     .Name("ConfirmEmailAddress")
                     .Filter("startswith")
                     .Placeholder("Confirm Email Address")
                )</div>
    </div>

    ........................

    <script type="text/javascript">

    $(document).ready(

    function () {

    window.validator = $(

    "#Form").kendoValidator().data("kendoValidator");

    });

    </

     

     

    script>



  16. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 01 Nov 2012 Link to this post

    Hello,

    The compare validation is currently not supported by the Kendo Validator and you should create a custom rule in order to use it. For example:

    $("#Form").kendoValidator({
        rules: {
            equalto: function (input) {
                if (input.filter("[data-val-equalto-other]").length) {
                    var otherField = input.attr("data-val-equalto-other");
                    otherField = otherField.substr(otherField.lastIndexOf(".") + 1);
                    debugger;
                    return input.val() == $("#" + otherField).val();
                }
                return true;
            }
        },
        messages: {
            equalto: function (intput) {
                return intput.attr("data-val-equalto");
            }
        }
    });
    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Sean
    Sean avatar
    1 posts
    Member since:
    Mar 2013

    Posted 25 Apr 2013 Link to this post

    This is directed to the Kendo team themselves.

    Hi,

    from reading the posts in this thread am I write in saying that I have to do validation like below..

    1. I add the hml5 attribute (data-required-msg/validationMessage) to the textbox and the required attribute as well..
    2. I make a span for the invalid msg and tie it to the field with the "data-for" attribute. The message "Please enter name" should appear in this span then.

    Note(Please ignore the <br/> tags in the code blocks, it was as part of reformatting with this tool)

    Questions
    Is this the only way to work with this?
    Is there no way for me to proper error message ("Error Message I want to show") displayed, as in any way to tie to the mvc attributes on the ViewModel. As another poster said this is a lot more scalable/re-usable and better design.


    Using a data-for="Name" is very brittle as a change in the Model field name will not reflect there and that could be forgotten about hence delivering buggy software. You are losing the type safety of something like.

    @Html.ValidationMessageFor(m=> m.Name)


     
    public class AViewModel<br>
        {<br>
            [Required(ErrorMessage="Error Message I want to show")]<br>
            public string Name { get; set; }<br>
     }


    <div class="validation-wrapper"><br>
                    <div class="input-wrapper"><br>
                        @Html.TextBoxFor(m => m.Name, new { placeholder = "eg. John Smith", data_required_msg="PleaseEnter name", required="required" } )    <br>
                        @Html.ValidationMessageFor(m=> m.Name)<br>
                    </div><br>
                    <span class="k-invalid-msg" data-for="Name"></span><br>
                </div>



    Cheers,
    J
  18. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 29 Apr 2013 Link to this post

    Hello Sean,

    You could extend the Kendo Validator to support the MVC unobtrusive attributes using an approach similar to the in the snippet below:

    (function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: {
                mvcrequired: function (input) {            
                    if (input.filter("[data-val-required]").length) {
                        var value = input.val();
                        return !(value === "" || !value);
                    }
                    return true;
                }
            },
            messages: { 
                mvcrequired: function (input) {
                    return input.attr("data-val-required");
                }
            }
        });
    })(jQuery, kendo);
    Most of the validation attributes are supported out of the box when using Kendo UI for MVC.

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  19. Volker
    Volker avatar
    22 posts
    Member since:
    Jul 2013

    Posted 31 Jul 2013 Link to this post

    Any news on the issues mentioned in this thread? I wasted a lot of time now wondering why (after switch to Kendo Validator) my attributes defined on model properties did no longer work (especially the "COMPARE" attribute).

    It would really be very helpful for customers if this basic stuff would be supported out of the box.

    Thanks,
    Volker

  20. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 31 Jul 2013 Link to this post

    Hi Volker,

     Currently the situation remains the same. However your suggestion looks like a valuable feature request. Could you please log one in our feedback portal? Then we would monitor the interest and decide when to implement it.

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  21. Jacques
    Jacques avatar
    135 posts
    Member since:
    Jun 2007

    Posted 03 Nov 2014 in reply to Atanas Korchev Link to this post

    Does this affect Kendo Validator only or are we talking about unobtrusive? I.e. I'm having a problem where my Kendo DropDownList in MVC is not applying either a Required or Range validator. It never fires. So I'm wondering if this is the case with all Kendo for MVC controls... do they not work with unobtrusive. I can see the unobtrusive data attributes being rendered and my validation message for span is there, but it just never fires. 
  22. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 06 Nov 2014 Link to this post

    Hello Jacques,

    The Required and Range validation are supported by both the Kendo Validator and the jQuery validation. The validation will not work for the dropdownlist with the jQuery validation if the ignore setting is not overridden as described in this documentation topic.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready