Custom Validation for TextBoxes

[Tariq]

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

[Kostadin]

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

[Tariq]

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

[Kostadin]

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