Check passwords and show image

8 posts, 0 answers
  1. Katya
    Katya avatar
    21 posts
    Member since:
    May 2013

    Posted 23 May 2013 Link to this post

    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.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 May 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Katya
    Katya avatar
    21 posts
    Member since:
    May 2013

    Posted 27 May 2013 Link to this post

    Thanks shinu but the image is coming below the textbox. How to place it beside the textbox?
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 May 2013 Link to this post

    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.
  6. Katya
    Katya avatar
    21 posts
    Member since:
    May 2013

    Posted 28 May 2013 Link to this post

    Thanks. How can I add an icon on either sides of a radbutton? I used css but didnt helped
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 May 2013 Link to this post

    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.
  8. Katya
    Katya avatar
    21 posts
    Member since:
    May 2013

    Posted 30 May 2013 Link to this post

    Thanks. Also how can I create a telerik REPLY like button?
  9. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 May 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017