I was playing around with ASPNET AJAX MaskEditExtender control and ASPNET Validation controls when I was working with a profile page and doing some input validations. Everything seems to be fine until I was told to always retain the phone mask format in the TextBox.
Here’s my code for Phone number masking:
<asp:TextBox ID="TXTPhoneNumber" runat="server" MaxLength="13" ValidationGroup="GroupA" />
<asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
TargetControlID="TXTPhoneNumber"
ClearMaskOnLostFocus ="false"
MaskType="None"
Mask="(999)999-9999"
MessageValidatorTip="true"
InputDirection="LeftToRight"
ErrorTooltipEnabled="True">
</asp:MaskedEditExtender>
<asp:MaskedEditValidator ID="MaskedEditValidator1" runat="server"
ValidationGroup="GroupA"
ControlToValidate="TXTPhoneNumber"
ControlExtender="MaskedEditExtender1"
Display="Dynamic" IsValidEmpty="true"
ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
InvalidValueMessage="Invalid Phone Number!" Text="*"
ErrorMessage="Home Phone">
</asp:MaskedEditValidator>
Running the code above will keep the mask format as it is. Now the problem is that when I pre-populate the phone TextBox, the left most digit will get cut off and I find it very frustrating. I don’t know if this a *bug* or something.
The Workaround:
To fix the issue, what I did is to get rid of the ClearMaskOnLostFocus property in the markup and instead set it via JavaScript. You may also notice in the code below that I have also use a JavaScript for setting the default mask on load of the page.
Here’s the full code below:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript">
function checkMask() {
var TXTPhone = document.getElementById('<%= TXTPhoneNumber.ClientID %>');
if (TXTPhone.value.length > 0) {
TXTPhone.value = '(' + TXTPhone.value.slice(0, 3) + ')' + TXTPhone.value.slice(3, 6) + '-' + TXTPhone.value.slice(6, 10);
}
else {
TXTPhone.value = '(___)___-____';
}
}
function setMask() {
var mee = $find("MEE");
mee.set_ClearMaskOnLostFocus(false);
}
</script>
</head>
<body onload="checkMask();">
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
<asp:TextBox ID="TXTPhoneNumber" runat="server" MaxLength="13" ValidationGroup="GroupA" onblur="setMask();" />
<asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server" TargetControlID="TXTPhoneNumber" BehaviorID="MEE"
MaskType="None"
Mask="(999)999-9999"
MessageValidatorTip="true"
InputDirection="LeftToRight"
ErrorTooltipEnabled="True">
</asp:MaskedEditExtender>
<asp:MaskedEditValidator ID="MaskedEditValidator1" runat="server" ValidationGroup="GroupA"
ControlToValidate="TXTPhoneNumber"
ControlExtender="MaskedEditExtender1"
Display="Dynamic" IsValidEmpty="true"
ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
InvalidValueMessage="Invalid Phone Number!" Text="*"
ErrorMessage="Home Phone">
</asp:MaskedEditValidator>
</form>
</body>
</html>
That’s it! I hope someone find this post useful!