I cannot figure out why my one field (Phone Number) isn't holding its MaskedEditExtender after you click away, while the others work just fine. I compared the properties and controls and they're all the same.
I suspect that it has something to do with my Validation Expression not matching my Mask, but when I tried adding in the exceptions for the symbols [() and -], it didn't work (or I did it wrong).
The problem child:
<div class="col-xs-6">
<asp:TextBox
runat="server"
ID="TextBox_PhoneNumber"
class="form-control"
Style="max-width: 145px" />
<asp:RegularExpressionValidator
ID="RegularExpressionValidator_PhoneNumber"
runat="server"
ControlToValidate="TextBox_PhoneNumber"
ErrorMessage="Invalid phone number."
ValidationExpression="^[2-9]\d{2}\d{3}\d{4}$"
Display="Dynamic"
SetFocusOnError="True"
Font-Bold="true"
ForeColor="red"
ValidationGroup="ValidationGroup_Main" />
<asp:RequiredFieldValidator
runat="server"
ID="RequiredFieldValidator_PhoneNumber"
ControlToValidate="TextBox_PhoneNumber"
ErrorMessage="Employee Info: Phone Number is blank."
Text="Required"
class="text-right"
Display="Dynamic"
Font-Bold="true"
ForeColor="red"
ValidationGroup="ValidationGroup_Main" />
<ajaxToolkit:MaskedEditExtender ID="maskededitextender_PhoneNumber" runat="server" TargetControlID="TextBox_PhoneNumber" Mask="(999) 999-9999" MaskType="Number" AcceptNegative="None" AutoComplete="false" />
Resulting in (while entering the phone number):
Resulting in (after clicking away after entry):
How can I get that mask to stick?
Figured it out myself:
In the "MaskedEditExtender", I needed to add this control:
ClearMaskOnLostFocus="false"
This forces the mask to stick at all times. I applied this to all of my other Masks now too (Dates, Zipcode, etc).
The reason my Date fields weren't having this problem is because the "MaskType" of the "MaskedEditExtender" was set to "Date". There isn't one for Phone Number, and therefore it was treating it as either a number or nothing, neither of which have default Phone Number formatting like Date does.
However this did mess up my ValidationExpression in the Regex (because it was counting the Validation Expression as part of the data being submitted, and therefore I needed to add the formatting that my mask was using to my expression), but I just adjusted it to this:
ValidationExpression="^\([2-9]\d{2}\) \d{3}\-\d{4}$"
Success!
Hope this helps somebody else.
Related
On my aspx page I have a textbox, which is placed on a modal window, together with an OK button:
<asp:TextBox runat="server" ID="contactInfo" TextMode="Phone" ToolTip="Please enter your phone number">01234/567890</asp:TextBox>
<asp:Button ID="btnOK" runat="server" Text="Ok" OnClick="btnOk_Click" />
However, the TextMode="Phone" doesn't seem to do any validation at all. Even if I enter absolute nonesense like "Hi, this is a text and definitely not a phone number" the page will not complain. If, for example, I change the TextMode to TextMode="Email", then a message will appear asking me to enter a valid e-mail address and the modal window stays open, no matter how often I try to click the OK button.
Right now I have to validate the phone number on the client side (as changing the TextMode to Number introduces a whole lot of other problems), but I would like to use the "framework solution" just as I am able to with TextMode.Email.
Is the validation check really not implemented for TextMode.Phone? I couldn't find anything helpful regarding this topic.
<asp:TextBox TextMode="Phone"> is a .NET element that gets rendered into <input type="tel"> HTML element and this HTML element does not automatically validate.
From MDN:
<input> elements of type "tel" are used to let the user enter a
telephone number. Unlike <input type="email"> and <input type="url"> ,
the input value is not automatically validated to a particular format
before the form can be submitted — this is because formats for
telephone numbers vary so much around the world.
You can validate using a <asp:RegularExpressionValidator> with your desired regex.
For example:
<asp:RegularExpressionValidator ID="revPhone" runat="server"
ErrorMessage="Not a valid phone" ControlToValidate="contactInfo"
ValidationExpression="^[01]?[- .]?(\([2-9]\d{2}\)|[2-9]\d{2})[- .]?\d{3}[- .]?\d{4}$">
</asp:RegularExpressionValidator>
I have used the masked textbox in asp.net c# application
<div class="span3">
<asp:TextBox ID="txtExpiryDate" placeholder="(mm-dd-yy)" CssClass="datepiker" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
Display="Dynamic" ControlToValidate="txtExpiryDate"><b>Enter Renewal Date</b></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator Display="Dynamic" ID="valdRegStartDate" runat="server"
ControlToValidate="txtExpiryDate" ErrorMessage="Enter a valid Expiry Date." ValidationExpression="([1-9]|0[1-9]|1[012])([-/.])([1-9]|0[1-9]|[12][0-9]|3[01])([-/.])(19[5-9][0-9]|20[0-4][0-9])"><b>Enter a valid Expiry Date.</b>
</asp:RegularExpressionValidator>
<cc1:MaskedEditExtender ID="MaskDate" Enabled="true" runat="server" MaskType="Date"
Mask="99-99-9999" TargetControlID="txtExpiryDate" MessageValidatorTip="true" ClearMaskOnLostFocus="false">
</cc1:MaskedEditExtender>
</div>
The placeholder (mm-dd-yy) in the textbox is not displayed and backspace is not working.
It displays placeholder as __-__-____ instead of (mm-dd-yy).
Please help me !!!
Remove placeholder in your markup and try this in your Page_Load:
txtExample.Attributes.Add("placeholder","mm/dd/yyyy");
The MaskedEditExtender is overriding your placeholder. That's why you're seeing __-__-____ (according to the mask). You can't really have both so one will have to give. You already have the regular expression validator (which is checking for a 4-digit year) so I suggest removing the MaskedEditExtender and tweaking your validator.
I'd even go as far as saying using a CustomValidator to clean up the markup a little.
I need to format some inputs in an Textbox and I've tried to do so with the MaskedEditExtender. I don't know what mask I have to use to get what I want - maybe somebody knows.
The entered values are only numeric values with amounts between 100 and 9999999 Euros an I want to show the thousand separators an cent separators while typing into the textbox like this:
Input: 100
Show: 100,00
Input: 345000,50
Show: 345.000,50
To be more specific I want the exact same behavior like typing numeric values into an calculator and the kind the calculator shows the entered values on the display.
Here is an (expensive) example with exact the behavior I need for free: https://demos.devexpress.com/ASPxEditorsDemos/Features/MaskedInput.aspx
This is my code:
<asp:TextBox ID="purposeAmount" CssClass="textBoxCreateItem" OnTextChanged="purposeAmount_OnTextChanged" AutoPostBack="true" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="purposeAmount" Display="Dynamic" SetFocusOnError="true" ErrorMessage="Only numeric allowed." ForeColor="Red" ValidationExpression="^\d+(\,\d+$)?$" ValidationGroup="NumericValidate"><br />Erlaubte Zeichen: 0-9 und ,</asp:RegularExpressionValidator>
<asp:RequiredFieldValidator id="RequiredFieldValidator4" runat="server" ControlToValidate="purposeAmount" ValidationGroup="NumericValidate" Display="Static" ForeColor="Red"><br />Eingabe erforderlich.</asp:RequiredFieldValidator>
<cc1:MaskedEditExtender TargetControlID="purposeAmount" MaskType="Number" Mask="9,999.99" runat="server" />
Try this:
<ajax:MaskedEditExtender ID="MaskedEditExtender2" Mask="9,999.99"...</ajax:MaskedEditExtender>
I am trying to enforce 15-minute granularity for time information entered by the user. So, for example, 12:15 PM and 3:45 am and 9:30 A.M. are all acceptable, but 2:35 PM would not be allowed. Server-side validation works, but it would be nice if the user was told their input was invalid when the text box loses focus, before they click the submit button. Here is the code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="True" UpdateMode="Always">
<ContentTemplate>
<asp:TextBox ID="txtStartTime" runat="server" AutoPostBack="True" CausesValidation="True"/>
<Ajax:MaskedEditExtender ID="txtStartTime_MaskedEditExtender" runat="server"
TargetControlID="txtStartTime" MaskType="Time" AcceptAMPM="True"
Mask="99:99">
</Ajax:MaskedEditExtender>
<asp:RequiredFieldValidator runat="server" ID="StartTimeRequired"
ValidationGroup="EventAddEditControls" ControlToValidate="txtStartTime"
EnableClientScript="True" SetFocusOnError="True">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ErrorMessage="Invalid time format." ControlToValidate="txtStartTime"
ValidationGroup="EventAddEditControls" SetFocusOnError="True"
EnableClientScript="True" Text="Invalid time format."
ValidationExpression="^([1-9]|0[1-9]|1[012]):(00|15|30|45)\s?[aApP]\.?[mM]\.?$" />
<Ajax:MaskedEditValidator ID="MaskedEditValidator1" ControlToValidate="txtStartTime"
ControlExtender="txtStartTime_MaskedEditExtender" IsValidEmpty="False"
ValidationGroup="EventAddEditControls"
ValidationExpression="^([1-9]|0[1-9]|1[012]):(00|15|30|45)\s?[aApP]\.?[mM]\.?$"
EnableClientScript="True" SetFocusOnError="True" Text="Time format is invalid."
runat="server"></Ajax:MaskedEditValidator>
</ContentTemplate>
</asp:UpdatePanel>
How can I get the MaskedEditExtender to enforce the 15-minute granularity constraint on the client side also (assuming that this is possible)?
This seems overly simple, but it seems to work.
The first thing I did was to comment out the RegularExpressionValidator - you don't really need both this and the MaskedEditValidator. To prove the point, apply the fix below but don't comment out the RegularExpressionValidator. Upon a failed validation you will see both errors.
The last thing was to replace the Text property of the MaskedEditValidator with the InvalidValueMessage property:
<Ajax:MaskedEditValidator ID="MaskedEditValidator1" ControlToValidate="txtStartTime"
ControlExtender="txtStartTime_MaskedEditExtender" IsValidEmpty="False"
ValidationGroup="EventAddEditControls"
ValidationExpression="^([1-9]|0[1-9]|1[012]):(00|15|30|45)\s?[aApP]\.?[mM]\.?$"
EnableClientScript="True" SetFocusOnError="True"
InvalidValueMessage="Time format is invalid." runat="server">
</Ajax:MaskedEditValidator>
This example gave me the hint regarding the correct property to use.
Doing both of these things resulted in the validation occurring when tabbing out of the control. This also indicates that the MaskedEditValidator was validating all along.
I succesfully used a validator more than once,but after some programming my validators are not working.Maybe is something i don't know about defining 2 validators for the same control, but it doesn't work for one validator in a control either.Here are 2 examples of my code:
Example 1: one required field validator and one "maximum value" validator for username:
<asp:RequiredFieldValidator id="UsernameRequiredValidator" runat="server"
ControlToValidate="UserNameTextbox" ForeColor="red"
Display="Dynamic" ErrorMessage="Required" />
<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="UsernameTextbox" MinimumValue="1" MaximumValue="20" ForeColor="red"
Display="Dynamic" ErrorMessage="Name must contain maximum 20 characters"></asp:RangeValidator>
Example 2: one "maximum value" validator for roadaddress(string):
<asp:RangeValidator ID="RangeValidator9" runat="server" MaximumValue="50" ForeColor="red"
ErrorMessage="Road Address must contain maxmum 50 characters" ControlToValidate="RoadAddressTextbox"></asp:RangeValidator>
I am thinking that the problem is maybe in the display property or in the causesvalidation property which i don't use...
That's not what the RangeValidator is used for. The RangeValidator is intended to check input to make sure it's within a certain range, i.e. to make sure that a number is between 1 and 5, that a date is within a certain range, etc.
What you need is a RegularExpressionValidator:
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="UserNameTextbox"
ErrorMessage="Username must be between 1 and 50 characters"
ValidationExpression="^[a-zA-Z\s]{1,50}">
</asp:RegularExpressionValidator>
EDIT: Updated expression to ^[a-zA-Z\s]{1,50}
RangeValidators don't validate the number of characters in the input, they "Check whether the value of an input control is within a specified range of values."
You can actually do this without a Validator, by setting the MaxLength property on the text box which would limit the number of characters entered into it.
<asp:TextBox ID="UserNameTextbox" MaxLength="50" runat="server"></asp:TextBox>