Validate AJAX Toolkit Combobox Regular Expression Validator

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:

1. Create an on the asp page. This is necessary because without it, the site will not generate event handlers for the needed buttonclick event.

2. 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;
   }
   

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