I fixed it. But dont know this is correct or not. I mentioned the modified code below. Please verify it and let me know in case any issues
I modified the TextField as
Html.X().TextField().ID("Text1")
.GetErrors(error => { error.Fn = "getCustomErrors"; })
.Plugins(new InputMask { Mask = "(999) 999-9999", AlwaysShow = true, ID = "Input1", Placeholder = 'X', ClearWhenInvalid = false, AllowInvalid = true })
.Regex(@"^\(\d{3}\)\s\d{3}-\d{4}$")
and added script section
var getCustomErrors = function (value) {
var errors = [];
var me = this,
regex = me.regex,
allowBlank = me.allowBlank,
value = value || me.processRawValue(me.getRawValue());
if (value.length < 1 || (value === me.emptyText && me.valueContainsPlaceholder)) {
if (!allowBlank) { errors.push(me.blankText); }
return errors;
}
if (allowBlank && me.inputMask.mask.replace(/9/g, me.inputMask.placeholder) == value) {
me.clearInvalid();
return errors;
}
else {
if (regex && !regex.test(value)) {
me.markInvalid(me.regexText || me.invalidText);
errors.push(me.regexText || me.invalidText);
}
}
return errors;
}
Full Source
@model Ext.Net.MVC.Sample.Models.ExtNetModel
@using Ext.Net
@using Ext.Net.MVC
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET MVC Sample</title>
<script type="text/javascript">
var onCountryChange = function (combo, records, eOpts) {
App.Text1.regex = /^(\+91[\-\s]?)?[89]\d{9}$/;
App.Input1.setMask("+91 9999999999")
}
var saveData = function (obj) {
//debugger;
var form = obj.up('form').getForm();
if (form.isValid()) {
alert('success');
}
else {
alert('error');
}
}
var getCustomErrors = function (value) {
var errors = [];
var me = this,
regex = me.regex,
allowBlank = me.allowBlank,
value = value || me.processRawValue(me.getRawValue());
if (value.length < 1 || (value === me.emptyText && me.valueContainsPlaceholder)) {
if (!allowBlank) { errors.push(me.blankText); }
return errors;
}
if (allowBlank && me.inputMask.mask.replace(/9/g, me.inputMask.placeholder) == value) {
me.clearInvalid();
return errors;
}
else {
if (regex && !regex.test(value)) {
me.markInvalid(me.regexText || me.invalidText);
errors.push(me.regexText || me.invalidText);
}
}
return errors;
}
</script>
</head>
<body>
@Html.X().ResourceManager()
@(Html.X().Window()
.Title(Model.WindowTitle)
.Height(215)
.Width(350)
.DefaultButton("Button1")
.Modal(true)
.Layout("fit")
.Items(Html.X().FormPanel()
.DefaultAnchor("100%")
.BodyPadding(5)
.Frame(true)
.Items(Html.X().ComboBox()
.ID("ComboBoxCountry")
.Editable(false)
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)
.SelectOnFocus(true)
.EmptyText("Select a country")
.Listeners(listen => { listen.Select.Fn = "onCountryChange"; })
.Items(
new ListItem("US", "1"),
new ListItem("India", "2"),
new ListItem("Bulgaria", "3"),
new ListItem("Canada", "4"),
new ListItem("Chile", "5")
),
Html.X().TextField().ID("Text1")
.GetErrors(error => { error.Fn = "getCustomErrors"; })
.Plugins(new InputMask { Mask = "(999) 999-9999", AlwaysShow = true, ID = "Input1", Placeholder = 'X', ClearWhenInvalid = false, AllowInvalid = true })
.Regex(@"^\(\d{3}\)\s\d{3}-\d{4}$")
)
.Buttons(Html.X().Button()
.ID("Button1")
.Text("Submit")
.Icon(Icon.Accept)
.Handler("saveData(this);")
)
)
)
</body>
</html>