Masked TextBox inside listview | regular expression not working

5 posts, 0 answers
  1. Varun
    Varun avatar
    3 posts
    Member since:
    Dec 2014

    Posted 25 Dec 2014 Link to this post

    Hi friends

    I am new to Kendo controls. I have a specific situation in which the regular expression for phone number is not working.
    I am using Masking for Phone number textbox. I have this kind of text box for phone number in multiple pages but somehow its not working in listview(edit).
    Please have a look at the below code and if i have missed anything, please let me know. I have used the code of existing Kendo Listview MVVM sample and made changes for Product Name. when 'edit' is clicked it will change the product name to masked text box. I have given regular expression for Phone number masked text box to accommodate 10 digits phone number, but somehow its not working here. Please see this part of the code.
    <dd>                
       <input title="Phone Number"                 
          name="PhoneNumber"                       
          type="text"                       
          class="k-textbox k-invalid"                       
          required=""                       
          data-bind="value: PhoneNumber"                       
          data-mask="(000) 000-0000"                       
          data-role="maskedtextbox"                      
          data-value-update="keyup"                      
          placeholder="Phone Number"                     
          pattern="^\(([0-9]{3})\) {1}([0-9]{3})-{1}([0-9]{4})$" />           
     </dd>

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
     
        <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
        <script src="../content/shared/js/console.js"></script>
    </head>
    <body>
        <div id="example">
        <div class="demo-section k-header">
            <div class="box-col" style="width: 420px;">
                <h4>Update a record</h4>
                <div data-role="listview"
                     data-edit-template="edit-template"
                     data-template="template"
                     data-bind="source: products,
                                visible: isVisible,
                                events: {
                                  save: onSave
                                }"
                     style="width: 420px; height: 200px; overflow: auto"></div>
            </div>
            <div class="box-col console-section">
                <h4>Console</h4>
                <div class="console"></div>
            </div>
        </div>
        <script type="text/x-kendo-tmpl" id="template">
            <div class="product-view k-widget">
                <div class="edit-buttons">
                    <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
                    <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
                </div>
                <dl>
                    <dt>Product Name</dt>
                    <dd>#:ProductName#</dd>
                    <dt>Unit Price</dt>
                    <dd>#:kendo.toString(UnitPrice, "c")#</dd>
                    <dt>Units In Stock</dt>
                    <dd>#:UnitsInStock#</dd>
                    <dt>Discontinued</dt>
                    <dd>#:Discontinued#</dd>
                </dl>
            </div>
        </script>
     
        <script type="text/x-kendo-tmpl" id="edit-template">
            <div class="product-view k-widget">
                <div class="edit-buttons">
                    <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
                    <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
                </div>
                <dl>
                    <dt>Product Name</dt>
                    <dd>
                    <input title="Phone Number"
                           name="PhoneNumber"
                           type="text"
                           class="k-textbox k-invalid"
                           required=""
                           data-bind="value: PhoneNumber"
                           data-mask="(000) 000-0000"
                           data-role="maskedtextbox"
                           data-value-update="keyup"
                           placeholder="Phone Number"
                           pattern="^\(([0-9]{3})\) {1}([0-9]{3})-{1}([0-9]{4})$" />
                </dd>
                    <dt>Unit Price</dt>
                    <dd>
                        <input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1" validationMessage="required" />
                        <span data-for="UnitPrice" class="k-invalid-msg"></span>
                    </dd>
                    <dt>Units In Stock</dt>
                    <dd>
                        <input type="text" data-bind="value:UnitsInStock" data-role="numerictextbox" name="UnitsInStock" required="required" data-type="number" min="0" validationMessage="required" />
                        <span data-for="UnitsInStock" class="k-invalid-msg"></span>
                    </dd>
                    <dt>Discontinued</dt>
                    <dd><input type="checkbox" name="Discontinued" data-bind="checked:Discontinued"></dd>
                </dl>
            </div>
        </script>
        <div class="box">
            <div class="box-col" style="width: 420px;">
                <h4>Configuration</h4>
                <div>
                    <label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
                </div>
            </div>
            <div class="box-col">
                <h4>Information</h4>
                Kendo UI ListView supports the
                <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
            </div>
        </div>
    <script>
        var viewModel = kendo.observable({
            isVisible: true,
            onSave: function(e) {
                kendoConsole.log("event :: save(" + kendo.stringify(e.model, null, 4) + ")");
            },
            products: new kendo.data.DataSource({
                schema: {
                    model: {
                        id: "ProductID"
                    }
                },
                batch: true,
                transport: {
                    read: {
                        url: "http://demos.telerik.com/kendo-ui/service/products",
                        dataType: "jsonp"
                    },
                    update: {
                        url: "http://demos.telerik.com/kendo-ui/service/products/update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: "http://demos.telerik.com/kendo-ui/service/products/create",
                        dataType: "jsonp"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                        }
                    }
                }
            })
        });
        kendo.bind($("#example"), viewModel);
    </script>
     <style scoped>
            .product-view
            {
                float: left;
                position: relative;
                width: 400px;
                margin: -1px -1px 0 0;
            }
            .product-view dl
            {
                margin: 10px 0;
                padding: 0;
                min-width: 0;
            }
            .product-view dt, dd
            {
                float: left;
                margin: 0;
                padding: 3px;
                height: 32px;
                width: 180px;
                line-height: 32px;
                overflow: hidden;
            }
            .product-view dt
            {
                clear: left;
                padding: 3px 5px 3px 0;
                text-align: right;
                opacity: 0.6;
                width: 100px;
            }
            .product-view .k-textbox {
                width: auto;
            }
            .edit-buttons
            {
                position: absolute;
                top: 0;
                right: 0;
                width: 26px;
                height: 160px;
                padding: 2px 2px 0 3px;
                background-color: rgba(0,0,0,0.1);
            }
            .edit-buttons .k-button
            {
                width: 26px;
                margin-bottom: 1px;
            }
            .k-pager-wrap
            {
                border-top: 0;
            }
            span.k-invalid-msg
            {
                position: absolute;
                margin-left: 6px;
            }
        </style>
    </div>
     
     
    </body>
    </html>

    I will really appreciate some help on this.

    Regards
    Varun
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 29 Dec 2014 Link to this post

    Hi,

    I took the code you provided and added it in this jsbin. As far as I see, the masked text box works as expected. I may be missing something, though. Can you please elaborate? 

    Regards,
    Petyo
    Telerik
     
    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
  4. Varun
    Varun avatar
    3 posts
    Member since:
    Dec 2014

    Posted 29 Dec 2014 in reply to Petyo Link to this post

    Hi Petyo

    Thanks for the reply. I will try to put issue in more clear words. If you can look at the Kendo UI List View MVVM example at this link http://dojo.telerik.com/. And replace the code on left side with the code which i have provided above. Please run the new code.

    After that try editing the information on right side, enter the valid numbers i mean 11 digits like (011) 888-2222. Click on Save you will see that it will give a validation error and will not save.
  5. Varun
    Varun avatar
    3 posts
    Member since:
    Dec 2014

    Posted 29 Dec 2014 in reply to Varun Link to this post

    Sorry, there were few mistakes in the above reply. Phone number is of 10 digits. And please see the attached screenshot for more clarity. Masked Text Box should accept the valid 10 digit phone number. But instead it gives a validation error.
  6. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 30 Dec 2014 Link to this post

    Hello Varun,

    the problem you are facing is actually related to the validation applied. The same scenario is done in this demo - please take the source code from there.

    Regards,
    Petyo
    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