Custom Validation for TextBoxes

4 posts, 0 answers
  1. Tariq
    Tariq avatar
    3 posts
    Member since:
    Jun 2011

    Posted 27 Jul 2012 Link to this post

    Hi, 

    I am generating dynamic controls (RadTextBox) on a page. 
    Set of 3 Rad TextBox in 5 rows. 

    txtFirstName_1     txtLastName_1    txtEmail_1
    txtFirstName_2     txtLastName_2    txtEmail_2 
    txtFirstName_3     txtLastName_3    txtEmail_3 
    txtFirstName_4     txtLastName_4    txtEmail_4 
    txtFirstName_5     txtLastName_5    txtEmail_5 

    Now I want to Validate for first Row ->  It should contain value for all three text boxes. (mandatory)
    for next 4 rows I  want to validate if any of the 3 text box is filled by the User, I need to force him to fill all three for that row.
    If all blank then its valid.

    for first row I added RequiredFieldValidator dynamically. but for next 4 rows I need client end validation like some generic JavaScript function that can validate all 3 controls value. If all 3 txtboxes are blank then no error other wise all 3 needed.

    Please help.

    Thanks
  2. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 01 Aug 2012 Link to this post

    Hello Tariq,

    One possible approach is to check is all textboxes are empty or all of them are with some text.
    JavaScript:
    function validation(sender, args) {
        var textBox1 = $find("<%=RadTextBox1.ClientID %>");
        var textBox2 = $find("<%=RadTextBox2.ClientID %>");
        var textBox3 = $find("<%=RadTextBox3.ClientID %>");
        var isValid = (textBox1.isEmpty() && textBox2.isEmpty() && textBox3.isEmpty())
            || (!textBox1.isEmpty() && !textBox2.isEmpty() && !textBox3.isEmpty());
        if (!isValid) {
            alert("Textboxes are not empty");
        }
    }
    ASPX:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadTextBox ID="RadTextBox1" runat="server" Label="TextBox1">
        </telerik:RadTextBox>
        <br />
        <telerik:RadTextBox ID="RadTextBox2" runat="server" Label="TextBox2">
        </telerik:RadTextBox>
        <br />
        <telerik:RadTextBox ID="RadTextBox3" runat="server" Label="TextBox3">
        </telerik:RadTextBox>
        <br />
        <telerik:RadButton ID="RadButton1" runat="server" Text="Postback" OnClientClicked="validation"></telerik:RadButton>

    I hope this helps.

    Greetings,
    Kostadin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tariq
    Tariq avatar
    3 posts
    Member since:
    Jun 2011

    Posted 07 Aug 2012 Link to this post

    Thanks Kostadin,

    I did solved the issue myself, Actually the issue is I don't know how much rows will be created dynamically (less then 11) so I can't use this approach, but I did it differently

    I used Generated Client ID in my JS function as below, let me know if this approach is good or not, The good part of this is ... Its working as desired:

    function chkCustomRequiredFields(oSrc, args) {
            args.IsValid = true;
            var isOk = 1;
            var err = "";
            var i = 0, j = 0;
            for (i = 0; i < 10; i++)
            {
                j = i + 1;
                var tf = document.getElementById("ctl00_ContentPlaceHolder1_txtFirstName" + i + "_text");
                var tl = document.getElementById("ctl00_ContentPlaceHolder1_txtLastName" + i + "_text");
                var te = document.getElementById("ctl00_ContentPlaceHolder1_txtEmail" + i + "_text");
     
                if (tf != null)
                {
                    if (tf.value == '' && tl.value == '' && te.value == '')
                        args.IsValid = true;
                    else
                    {
                        if (tf.value == '' || tl.value == '' || te.value == '')
                        {
                            if (isOk == 1)
                            {
                                err = "Member#" + j + " all fields value required";
                                document.getElementById('<%=this.cvCheck.ClientID%>').errormessage = err + "\n";
                                isOk = 2;
                            }
                            else
                            {
                                err = "- Member#" + j + " all fields value required";           // Included a  - (dash) before Message
                                document.getElementById('<%=this.cvCheck.ClientID%>').errormessage += err + "\n";
                            }
                        }
                    }
                }
            }
            if (isOk == 2)
                args.IsValid = false;
        }



    Thanks


  5. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 08 Aug 2012 Link to this post

    Hi Tariq,

    The approach is good, but keep in mind that if you change the structure of the page the ids of the controls will be changed too. In this case make sure that you change them in your javascript function.

    All the best,
    Kostadin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top