JavaScript not working with RadTextBox

Question

 <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">

            function ValidatePhoneNumbers() {

                var phone = document.getElementById('txtPhone1');
                var mobile =document.getElementById('txtPhone2');
                alert(phone.value);
                if ((phone.value == null || phone.value == "") && (mobile.value == null || mobile.value == "")) {
                    alert('something');
                    return false;
                }
                else {
                    alert('something');
                    return true;
                }
           }

        </script>

<tr>
                                        <td>
                                         <label for="txtPhone1">
                                                Phone :</label>
                                        </td>
                                        <td>

                                            <telerik:RadNumericTextBox ID="txtPhone1" runat="server" Text='<%# Bind("Phone_One") %>' Type="Number" Skin="Windows7" CssClass="txt">
                                                     <numberformat allowrounding="false" keepnotroundedvalue="False" GroupSeparator=""></numberformat>
                                            </telerik:RadNumericTextBox>
                                            <asp:CustomValidator ID="rqfldPhone1" runat="server" ControlToValidate="txtPhone1"
                                                Display="Dynamic" ErrorMessage="*" ValidationGroup="Submit" ToolTip="Enter Phone Number"  ></asp:CustomValidator>
                                        </td>

 <telerik:RadButton ID="btnUpdate" runat="server" Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                    CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                    Skin="Windows7" ValidationGroup="Submit">

When i add "OnClientClicked" to RadButton to call javaScript ( "return ValidatePhoneNumbers" ) in javaScript It showing NULL WHY ? there are 2 rad textbox txtphone1 and txtphone2 , Actually i want to validate these textbox , if any one is filled no prob otherwise i need to show A error/warning msg. pls help me

Actually ".value" is not shownig in javascript (document.GetelementById.value)

Answer 1

When you are working with telerik controls the javascript to find controls and do operations is different that of we work with normal html and javascript:

To find radcombox:

$find("<%=RadComboBox1.ClientID %>");//for example

Let work with your problem:

var phone=$find("<%=txtPhone1.ClientID %>");
var mobile=$find("<%=txtPhone2.ClientID %>");
alert(phone.get_value());//use get_value() to get the value of radcombobox
if ((phone.get_value() == null || phone.get_value() == "") && (mobile.get_value() == null ||  mobile.get_value()== "")) {
        alert('something');
        eventArgs.set_cancel(true);
    }
    else {
        alert('something');
    }
}

Answer 2

The OnClientClicked event will run a function by name with 2 parameters, these are akin to that used by .NET event handlers (sender and eventArgs). The Telerik controls don't cancel the action in the same manner as general HTML objects in that return false; doesn't cancel a post back. Instead, the Telerik API provides a set_cancel() function in the eventArgs parameter.

function ValidatePhoneNumbers(sender, eventArgs) {
    var phone = document.getElementById('<%= txtPhone1.ClientId %>'); // Corrected as per my comment
    var mobile =document.getElementById('<%= txtPhone2.ClientId %>'); // Corrected as per my comment
    alert(phone.value);
    if ((phone.value == null || phone.value == "") && (mobile.value == null || mobile.value == "")) {
        alert('something');
        eventArgs.set_cancel(true);
    }
    else {
        alert('something');
    }
}

You don't need to set the OnClientClicked="return ValidatePhoneNumbers" instead I would recomment using OnClientClicking ="ValidatePhoneNumbers" (see: http://www.telerik.com/help/aspnet-ajax/button-onclientclicking.html)

For more information regarding client side event handlers, see: http://demos.telerik.com/aspnet-ajax/menu/examples/programming/clientevents/defaultcs.aspx

The validator should trigger when the button is pressed, if it is not set CausesValidation="True" and maybe consider a RequiredFieldValidator to ensure it is populated before postback.