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

Using Kendo Validator with MVC Model Properties

20 Answers 3389 Views
Validation
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 2
Steve asked on 23 Jun 2012, 08:17 PM
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

20 Answers, 1 is accepted

Sort by
0
Saulo
Top achievements
Rank 1
answered on 26 Jun 2012, 06:31 PM
I have the same doubt
0
Daniel
Telerik team
answered on 28 Jun 2012, 10:03 AM
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!
0
Marcin
Top achievements
Rank 1
Veteran
answered on 15 Sep 2012, 05:40 AM
Is there any example? Demos do not contain razor version of validation, and I would like to see how to do that.
0
Daniel
Telerik team
answered on 19 Sep 2012, 04:26 PM
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!
0
Marcin
Top achievements
Rank 1
Veteran
answered on 19 Sep 2012, 04:50 PM
Which wrappers exactly? I have only few texboxes on page, so I wonder which kendo wrappers I should use?
0
Dirk
Top achievements
Rank 1
answered on 25 Sep 2012, 06:00 PM
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.
0
Dan
Top achievements
Rank 1
answered on 28 Sep 2012, 05:43 PM
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

0
Dan
Top achievements
Rank 1
answered on 28 Sep 2012, 06:21 PM
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
0
Todd
Top achievements
Rank 1
answered on 30 Sep 2012, 08:38 PM
@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
0
Daniel
Telerik team
answered on 03 Oct 2012, 01:48 PM
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!
0
Dirk
Top achievements
Rank 1
answered on 04 Oct 2012, 04:53 PM
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
0
Daniel
Telerik team
answered on 09 Oct 2012, 01:00 PM
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!
0
Bill
Top achievements
Rank 1
answered on 29 Oct 2012, 08:13 AM


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>



0
Daniel
Telerik team
answered on 01 Nov 2012, 11:23 AM
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!
0
Sean
Top achievements
Rank 1
answered on 25 Apr 2013, 09:07 AM
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
0
Daniel
Telerik team
answered on 29 Apr 2013, 08:30 PM
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!
0
Volker
Top achievements
Rank 1
answered on 31 Jul 2013, 05:03 AM
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

0
Atanas Korchev
Telerik team
answered on 31 Jul 2013, 02:46 PM
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!
0
Jacques
Top achievements
Rank 2
answered on 03 Nov 2014, 02:54 PM
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. 
0
Daniel
Telerik team
answered on 06 Nov 2014, 12:07 PM
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!
 
Tags
Validation
Asked by
Steve
Top achievements
Rank 2
Answers by
Saulo
Top achievements
Rank 1
Daniel
Telerik team
Marcin
Top achievements
Rank 1
Veteran
Dirk
Top achievements
Rank 1
Dan
Top achievements
Rank 1
Todd
Top achievements
Rank 1
Bill
Top achievements
Rank 1
Sean
Top achievements
Rank 1
Volker
Top achievements
Rank 1
Atanas Korchev
Telerik team
Jacques
Top achievements
Rank 2
Share this question
or