Disable button base on validation

[Mickael]

Hi,

I have 2 RadAutoCompleteBox and a button.

I want the button to be disabled until both RadAutoCompleteBox have 1 entry.
But I cannot seems to find how to do that.

Any help would be welcomed.

[Mickael]

I could use some help on this please.
I could not find anything related to it.

[Danail Vasilev]

Hello Mickael,

You can attach to some of the AutoCompleteBox' client-side event (e.g., OnClientTextChanged) where you can do the necessary logic for enabling/disabling the RadButton. For example:
ASPX:

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    <script>
        function OnClientTextChanged1(sender, args) {
            ToEnableButton();
        }
        function OnClientTextChanged2(sender, args) {
            ToEnableButton();
        }
        function ToEnableButton() {
            var ACB1 = $find("<%=RadAutoCompleteBox1.ClientID%>"),
                ACB2 = $find("<%=RadAutoCompleteBox2.ClientID%>"),
                button = $find("<%=RadButton1.ClientID%>");
            var isACB1Empty = ACB1.get_text() == ACB1.get_emptyMessage() || ACB1.get_text() == "";
            var isACB2Empty = ACB2.get_text() == ACB2.get_emptyMessage() || ACB2.get_text() == "";;
            if (isACB1Empty == false && isACB2Empty == false) {
                button.set_enabled(true);
            }
            else {
                button.set_enabled(false);
            }
        }
    </script>
    <telerik:RadButton ID="RadButton1" runat="server" Text="Some text" Enabled="false" />
    <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox1" EmptyMessage="Please type here" OnClientTextChanged="OnClientTextChanged1"
        DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Text" Width="350">
    </telerik:RadAutoCompleteBox>
    <telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox2" EmptyMessage="Please type here" OnClientTextChanged="OnClientTextChanged2"
        DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Text" Width="350">
    </telerik:RadAutoCompleteBox>
    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [FirstName], [LastName], [EmployeeID] FROM [Employees]"></asp:SqlDataSource>
</form>

The above code enables the RadButton when both AutoCompleteBoxes have at least one entry at the same time. You can modify this logic as per your own requirement.

Regards,
Danail Vasilev
Telerik

 

 

[Mickael]

Thanks Danail for your answer.

I tried it, and it works well but only if the AutoCompleteBox lose focus.
Because it is only then that the OnClientTextchanged event is fired.

I would have liked to has the event fired each time the user type/select something.
Otherwise the user might not understand why he has to click somewhere for the button to be enabled.

Is that possible ?

Otherwise I will simply resort to validation on the button click

[Danail Vasilev]

Hello Mickael,

I can suggest that you set InputType="Token" property and handle OnClientEntryAdded and OnClientEntryRemoved events for both autocompleteboxes where you can call the ToEnableButton function. For example:
ASPX:

<telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox1" EmptyMessage="Please type here" OnClientEntryAdded="ToEnableButton" OnClientEntryRemoved="ToEnableButton"
    DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Token" Width="350">
</telerik:RadAutoCompleteBox>
<telerik:RadAutoCompleteBox runat="server" ID="RadAutoCompleteBox2" EmptyMessage="Please type here" OnClientEntryAdded="ToEnableButton" OnClientEntryRemoved="ToEnableButton"
    DataSourceID="SqlDataSource1" DataTextField="FirstName" InputType="Token" Width="350">
</telerik:RadAutoCompleteBox>

Regards,
Danail Vasilev
Telerik

 

 

[Mickael]

It might work I will try it.
Thanks