This is a migrated thread and some comments may be shown as answers.

Custom Validation for TextBoxes

3 Answers 349 Views
Input
This is a migrated thread and some comments may be shown as answers.
Tariq
Top achievements
Rank 1
Tariq asked on 27 Jul 2012, 10:29 PM
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

3 Answers, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 01 Aug 2012, 12:07 PM
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.
0
Tariq
Top achievements
Rank 1
answered on 07 Aug 2012, 10:11 PM
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


0
Kostadin
Telerik team
answered on 08 Aug 2012, 12:23 PM
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.
Tags
Input
Asked by
Tariq
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
Tariq
Top achievements
Rank 1
Share this question
or