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

Masked TextBox inside listview | regular expression not working

4 Answers 429 Views

MaskedTextBox

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

Varun asked on 26 Dec 2014, 05:31 AM

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>

<base href="http://demos.telerik.com/kendo-ui/listview/mvvm">

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<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>

<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 class="box-col">

<h4>Information</h4>

Kendo UI ListView supports the

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.

</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

4 Answers, 1 is accepted

answered on 30 Dec 2014, 04:07 AM

kendo.png

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.