Validation patern does not work for kendoComboBox

2 posts, 0 answers
  1. Jan
    Jan avatar
    24 posts
    Member since:
    Nov 2011

    Posted 30 Jun 2012 Link to this post

    Hello,

    I cannot get patern to work, can get requiredto work  but not patern.
          <li>
                <label for="cities" >
                    Zip code:</label>
                <input id="contact_cities" data-bind="value: contact_zip" name="contact_cities" pattern="\d{5}" placeholder="Invalid zip code"
                    validationmessage="Invalid zip code." /><span class="k-invalid-msg" data-for="cities"></span></li>
            <li>
    .....
     
     
        $(document).ready(function () {
        
            var viewModel = kendo.observable({
                firstName: $.cookie("firstName"),
                lastName: $.cookie("lastName"),
                email: $.cookie("email"),
                phone: $.cookie("phone"),
                contact_zip: $.cookie("zip"),
                valid: false,
                contactseller: function () {
                    if (validator.validate()) {
     
                        $.cookie("firstName", $("#firstname").val(), { expires: 7, path: '/' });
                        $.cookie("lastName", $("#lastname").val(), { expires: 7 , path: '/'});
                        $.cookie("email", $("#email").val(), { expires: 7 , path: '/'});
                        $.cookie("phone", $("#phone").val(), { expires: 7 , path: '/'});
                        $.cookie("zip", $("#contact_cities").val(), { expires: 7 , path: '/'});
     
                        status.text("Hooray! Your tickets has been booked!").addClass("valid");
                    } else {
                        status.text("Oops! There is invalid data in the form.").addClass("invalid");
                    }
                }
            });
     
            kendo.bind($("#contactSeller"), viewModel);
     
            var validator = $("#contactSeller").kendoValidator().data("kendoValidator"), status = $(".status");
     
     
            $("#contact_cities").kendoComboBox({
                placeholder: "Select zip code",
                dataTextField: "Label",
                dataValueField: "Value",
                filter: "contains",
                dataSource: {
                    serverFiltering: true,
                    transport: {
                        read: {
                            url: '@Url.Action("GetCities", "MainSearch")',
                            data: function () {
                                var combobox = $("#contact_cities").data("kendoComboBox");
                                return {
                                    zip: combobox.input.val()
                                };
                            }
                        }
                    }
                }
            });
             
            $("img[title]").tooltip();
     
            $('.submit-link').click(function () {
                var input = $(this).attr('id');
                $("#lastId").val(input);
                var window = $("#contactSeller").data("kendoWindow"); window.center(); window.open();
            });
     
            var window = $("#contactSeller").kendoWindow({
                title: "Contact Seller",
                visible: false,
                modal: true,
                resizable: false   
                }).data("kendoWindow");
        });
  2. Rosen
    Admin
    Rosen avatar
    3237 posts

    Posted 02 Jul 2012 Link to this post

    Hi Nelson,

    In order pattern rule to work, the input element should have one of the following types set text, email, url, tel, search. Therefore, please set the type of the input to be text and see if there is any change in the observed behavior.

    <input type="text" id="contact_cities" data-bind="value: contact_zip" name="contact_cities" pattern="\d{5}" placeholder="Invalid zip code"
          validationmessage="Invalid zip code." />

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