Check passwords and show image

[Katya]

Hi Telerik,

I had been working in desktop application development and recently switched to web development in ASP.Net using telerik radcontrols. I have no experience working with Javascript and came to know this forum is so responsive. My registration form contain a password and confirm password radtextbox. From client side how can I check if they match and provide a cross or tick image beside the second textbox.

Thanks to all,
Katya.

[Shinu]

Hi Katya,

Please have a look at the following code I tried which works fine at my end.

ASPX:

<telerik:RadTextBox ID="RadTextBox1" runat="server" TextMode="Password" Label="Password ">
</telerik:RadTextBox>
<telerik:RadTextBox ID="RadTextBox2" runat="server" TextMode="Password" Label="Confirm Password "
    ClientEvents-OnBlur="OnBlur">
</telerik:RadTextBox>
<asp:Image ID="imageCross" runat="server" ImageUrl="~/Images/clo.jpg" style="display:none;"/>
<asp:Image ID="imageTick" runat="server" ImageUrl="~/Images/del.JPG" style="display:none;"/>

JavaScript:

<script type="text/javascript">
    function OnBlur(sender, args) {
        var textBox1 = $find('<%=RadTextBox1.ClientID %>');
        var textBox2 = $find('<%=RadTextBox2.ClientID %>');
        var imageCross = document.getElementById('<%= imageCross.ClientID %>');
        var imageTick = document.getElementById('<%= imageTick.ClientID %>');
        if ((textBox1._value == textBox2._value) && (textBox1._value.length != 0)) {
            imageTick.style.display = "block";
            imageCross.style.display = "none";
        }
        else {
            imageCross.style.display = "block";
            imageTick.style.display = "none";
        }
    }
</script>

Thanks,
Shinu.

[Katya]

Thanks shinu but the image is coming below the textbox. How to place it beside the textbox?

[Shinu]

Hi Katya,

Instead of setting the display to none, you can set the visibility to hidden as shown in the following code to achieve your requirement.

ASPX:

<telerik:RadTextBox ID="RadTextBox1" runat="server" TextMode="Password" Label="Password ">
</telerik:RadTextBox>
<telerik:RadTextBox ID="RadTextBox2" runat="server" TextMode="Password" Label="Confirm Password "
    Style="float: right;" ClientEvents-OnBlur="OnBlur">
</telerik:RadTextBox>
<asp:Image ID="imageCross" runat="server" ImageUrl="~/Images/clo.jpg" Style="visibility: hidden;" />
<asp:Image ID="imageTick" runat="server" ImageUrl="~/Images/del.JPG" Style="visibility: hidden;
    margin: 15px 0px 0px -15px;" />

JavaScript:

<script type="text/javascript">
    function OnBlur(sender, args) {
        var textBox1 = $find('<%=RadTextBox1.ClientID %>');
        var textBox2 = $find('<%=RadTextBox2.ClientID %>');
        var imageCross = document.getElementById('<%= imageCross.ClientID %>');
        var imageTick = document.getElementById('<%= imageTick.ClientID %>');
        if ((textBox1._value == textBox2._value) && (textBox1._value.length != 0)) {
            imageTick.style.visibility = "visible";
            imageCross.style.visibility = "hidden";
        }
        else {
            imageCross.style.visibility = "visible";
            imageTick.style.visibility = "hidden";
        }
    }
</script>

Thanks,
Shinu.

[Katya]

Thanks. How can I add an icon on either sides of a radbutton? I used css but didnt helped

[Shinu]

Hi Katya,

You can use the Primaryicon and Secondaryicon attributes to set an icon on either sides of the RadButton. Please have a look at the sample code I tried which works fine at my end.

ASPX:

<telerik:RadButton ID="RadButton1" runat="server" Text="Standard Button With Two Icons"
    GroupName="GroupName1">
    <Icon PrimaryIconUrl="../../img/icons/icon1.png" PrimaryIconTop="5px" PrimaryIconLeft="7px"
        SecondaryIconTop="5px" SecondaryIconRight="7px" SecondaryIconUrl="../../img/icons/icon2.png">
    </Icon>
</telerik:RadButton>

Thanks,
Shinu.

[Katya]

Thanks. Also how can I create a telerik REPLY like button?

[Shinu]

Hi,

Please have a look at the following code.

ASPX:

<telerik:RadButton runat="server" Text="Reply" BackColor="#499D3B" ForeColor="White"
    Style="border-radius: 3px; font-size: 14px; border: 1px solid Gray; width: 55px;
    height: 25px;">
</telerik:RadButton>

CSS:

<style type="text/css">
    .RadButton_Default.rbSkinnedButton, .RadButton_Default .rbDecorated, .RadButton_Default.rbVerticalButton, .RadButton_Default.rbVerticalButton .rbDecorated, .RadButton_Default .rbSplitRight, .RadButton_Default .rbSplitLeft
    {
        background-image: none !important;
    }
    .RadButton_Default .rbDecorated
    {
        font-size: 14px !important;
    }
</style>

Thanks,
Shinu.