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; }
}
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
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
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();
Daniel
the Telerik team
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.
<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
$("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
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
I am afraid that this is not supported. The validation rules should be added through the attributes.
Kind regards,Daniel
the Telerik team
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
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
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>
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"
);
}
}
});
Daniel
the Telerik team
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
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);
Regards,
Daniel
the Telerik team
It would really be very helpful for customers if this basic stuff would be supported out of the box.
Thanks,
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
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