Validating dropdownlist OR textbox

Question

I have a page where a user can either select a vendor via dropdown or enter a vendor number via textbox. One or the other must have a value. I can do this in javascript easily but how can I do this using a custom validator provided by ajax all on the client side?

Edited

 Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
    If Page.IsValid Then
        //save stuff
    End If
 End Sub

Sub ServerValidation(ByVal source As Object, ByVal args As ServerValidateEventArgs) Handles ValidPage.ServerValidate

     Try
         ' Test whether the value entered into the text box is even.
         Dim num As Integer = Integer.Parse(args.Value)
         args.IsValid = ((num Mod 2) = 0)

     Catch ex As Exception
         args.IsValid = False
End Try

End Sub

Protected Sub ValidPage_ServerValidate(ByVal source As Object, ByVal args As ServerValidateEventArgs)
    Try
        args.IsValid = (Not String.IsNullOrEmpty(Me.txtVendnum.Text) OrElse Me.DropDownList1.SelectedIndex <> 0)
    Catch e As Exception
        DirectCast(source, CustomValidator).ErrorMessage = "You must Choose a Vendor"
        args.IsValid = False
    End Try
End Sub
<script type="text/javascript" language="javascript" >
   function ClientValidate(sender, args) {
       // Get Both form fields
       var ddlvalue = document.getElementById('<%=DropDownList1.ClientID%>');
       var txtValue = document.getElementById('<%=txtVendnum.ClientID %>');

    // do you client side check to make sure they have something
       if (txtValue.value == '' && ddlvalue.value == '0') {

        args.IsValid = false;
    }
    else
    {
        args.IsValid = true;
    }

}

<asp:DropDownList ID="DropDownList1" runat="server" 
                    DataSourceID="SqlDataSource1" ValidationGroup="Save" DataTextField="vmvnnm" DataValueField="vmvend" >
                    </asp:DropDownList>

<asp:TextBox ID="txtVendnum" ValidationGroup="Save" runat="server"></asp:TextBox><br />

                        <asp:CustomValidator ID="ValidPage" ValidationGroup="Save" runat="server" ClientValidationFunction="ClientValidate" ErrorMessage="CustomValidator" 
                            SetFocusOnError="True" ControlToValidate="txtVendnum" EnableClientScript="true" Display="Static" OnServerValidate = "ServerValidation" ></asp:CustomValidator>

//other stuff. A different validator group, html editor, etc


<td>
                        <asp:ImageButton ID="ImageButton1" CausesValidation = "true"     ValidationGroup="Save" OnClick="ImageButton1_Click" runat="server" ImageUrl="../images/bttnSave.gif" />

                    </td>

Answer 1

You need to set the ClientValidationFunction property of your custom validator to the name of a javascript function that will exist on the page.

The function needs to take in two arguments, one of which is the "args" argument which you will set to be valid or not. An example based on the MSDN page for CustomValidator:

 function ClientValidate(source, args)
   {         
      if (myTextBox.Value == "" && myDropDown.Value == "" )
      {
         args.IsValid=false;
      }
      else {args.IsValid=true};
   }

Answer 2

<asp:CustomValidator ID="ValidPage" runat="server" 
    EnableClientScript="true"
    ClientValidationFunction="My.util.VendnumCheck"
    OnServerValidate="ValidPage_ServerValidate"
    ControlToValidate="txtVendnum" 
    ErrorMessage="You must Choose a Vendor" 
    SetFocusOnError="True" 
    ValidationGroup="Save">
</asp:CustomValidator>

ClientValidationFunction="My.util.VendnumCheck"

You should also be doing Server Side validation!

protected void ValidPage_ServerValidate(object source, ServerValidateEventArgs args)
{
    try
    {
        args.IsValid = (!string.IsNullOrEmpty(this.txtVendnum.Text) || this.DropDownList1.SelectedIndex != 0);
    }
    catch (Exception e)
    {
        ((CustomValidator)source).ErrorMessage = "You must Choose a Vendor";
        args.IsValid = false;
    } 
}


protected void Button_Click(object sender, EventArgs e)
{
     if (Page.IsValid)
     { 
         //do work
     }
}

JS:

My.util.VendnumCheck = function(sender, args) {
try {
        // Get Both form fields
        var ddlvalue = document.getElementById("<%=this.DropDownList1.ClientID %>");
        var txtValue = document.getElementById("<%=this.txtVendnum.ClientID %>").value;

        // do you client side check to make sure they have something 
        if ( txtValue.length < 1 && ddlvalue.selectedIndex != 0)
            args.IsValid = false;

        args.IsValid = true; 
    }
    catch (ex) {
        My.logError(ex);
        args.IsValid = false;
    }
}

try having this JS method called on Blur of the text box, see if it picks up the validator...

My.util.callMyValidators = function() {
    // Clean Up Infragistics Ids
    var cleanid = this.id.replace(/^igtxt/i, "");

    if (Page_Validators == null) {
        alert("My.util.callMyValidators when Page_Validators is null");
    }
    var found = 0;

    for (var i = 0; i < Page_Validators.length; i++) {
        if (Page_Validators[i].controltovalidate === cleanid) {
            found++;
            ValidatorValidate(Page_Validators[i]);
        }
    }

    if (found === 0) {
        alert("My.util.callMyValidators did find any matching validators for " + cleanid);
    }
}