String length validation in Masked text box

3 posts, 0 answers
  1. Pantulu
    Pantulu  avatar
    10 posts
    Member since:
    Feb 2015

    Posted 19 Mar 2015 Link to this post

    I am using the following mask for phone and zip code

    @(Html.Kendo().MaskedTextBox().Name("phone_number").Mask("(999) 000-0000")

    and my model is 
     [StringLength(10, MinimumLength = 10, ErrorMessageResourceName = "InvalidPhoneNumber", ErrorMessageResourceType = typeof(ErrorMessage), ErrorMessage = null)]
    public string phone_number { get; set; }

    I am using unobtrusive JS validation
    This works fine and throws the validation error for numbers less that 10, but still persists the error message with all digits filled.

    I tried setting the min length to 14(to include special characters within), but it never throws the error message by then.
    Is there any workaround or is this a known bug ?
  2. Pantulu
    Pantulu  avatar
    10 posts
    Member since:
    Feb 2015

    Posted 23 Mar 2015 Link to this post

    I found the fix
    I had to remove the mvc string length validations and 

    add the following to my html attribute

    data_validmask_msg = "Invalid number"

    use the following in my document.ready

            $(document).ready(function () {
                var container = $("form");
                kendo.init(container);
                container.kendoValidator({
                    rules: {
                        validmask: function (input) {
                            if (input.is("[data-validmask-msg]") && input.val() != "") {
                                var maskedtextbox = input.data("kendoMaskedTextBox");
                                return maskedtextbox.value().indexOf(maskedtextbox.options.promptChar) === -1;
                            }
                            return true;
                        }
                    }
                });
            });
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 23 Mar 2015 Link to this post

    Hi Pantulu,

    There are two things to consider in this scenario:

    1. The MaskedTextBox by default returns and submits its value together with the mask.

    2. You have defined a maximum length of 10 characters in the StringLength attribute configuration.

    Apart from using custom validation, you have two other options:

    - set UnMaskOnPost() to true (available in Q1 2015)
    - set ClearPromptChar() to true (available in Q3 2014 SP1)

    http://docs.telerik.com/kendo-ui/api/aspnet-mvc/Kendo.Mvc.UI.Fluent/MaskedTextBoxBuilder

    Also, be aware of the widget's raw() client-side method.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/maskedtextbox#methods-raw

    Regards,
    Dimo
    Telerik

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top