Validate AJAX Toolkit Combobox Regular Expression Validator - asp.net

Question

I was wondering if it was possible to validate the ajax toolkit combobox with a regular expression validator. I allow the user to enter values, but only want certain values ( regex [0-9]{0,1}[0-9]{1}|-7|-8|-9) to be allowed. I could use the custom validator, but I would need to also create javascript function to validate on the client side. If there is a better way I would love to hear it. Thanks. Here is the combobox code:
<asp:ComboBox CssClass="required" DropDownStyle="Simple"
ID="DaysDeployed" Width="50" runat="server">
<asp:ListItem Selected="True" Text="" Value="" />
<asp:ListItem Text="Refused" Value="-7" />
<asp:ListItem Text="Don't Know" Value="-8" />
<asp:ListItem Text="Missing Data" Value="-9" />
</asp:ComboBox>

Answer 1

Summary: Instead of using an asp.net button that would normally trigger your postback, make one using html. Have the html button run a javascript function that first checks the regex validation, then (if valid) runs the postback function.
First, I would remove the asp.net button that you use to trigger the server-side code, and replace it with a client-side button. You can follow the steps in another answer of mine if you need help creating this button. Here is the link:
https://stackoverflow.com/questions/14062993/input-type-image-onclick-will-trigger-its-event-but-not-act-well-on-funct/14063911#14063911-Stack Overflow
Second, the javascript function should first validate the data using a regex function. Use something like this:
function validateCombobox(myComboboxValue) {
if(myComboboxValue.match(regularExpressionString)===null){
return false
} else {
return true
};
};
***Note: Regex is a weak area for me so you may need to revise this script a little.
Third, if the input is validated using the script above, then call the postback using javascript. To do this, follow these steps:
Create an on the asp page. This is necessary
because without it, the site will not generate event handlers for
the needed buttonclick event.
Set the link-button's css display property to 'none'. Beware that
link-button's "Visible" attribute my be set to true (this is because
asp.net does not even render the code for controls with a false
visible attribute). To illustrate, if your link-button's cssClass
name is myButton, add this to your css file:
.myButton
{
display: none;
}
Now that the button is created and properly hidden, you can add the
postback function to your javascript function. The postback function
has two parameters, the first is the client side ID of the
link-button control that we created. Beware that the client-side
IDs of asp.net controls are not the same as the ID you assign it
during development. Because of this, we use <%=Control.ClientId %>
to get the control's client ID. If your link-button ID is
"myLinkButton", the following should be your postback function:
__doPostBack('<%=myLinkButton.clientid %>','')
Please note that there are two underscore characters in the
beginning of this function.
Here is an example of the regex validation function and the javascript function that should be called by your new button:
function validateCombobox(myComboboxValue) {
if(myComboboxValue.match(regularExpressionString)===null){
return false
} else {
return true
};
};
function comboBoxButton_click(){
var myComboboxValue = $('#<%=myComboBox.clientid %>').val();
if(validateCombobox(myComboboxValue)==true){
__doPostBack('<%=myLinkButton.clientid %>','');
};
};
I have a lot of distractions at the moment and am a little scatter-brained, so forgive me if these instructions are a little confusing. If you need more assistance, feel free to comment and I'll check back soon.