Javascript Validation of Multiple Textboxes

Question

1.00/5 (1 vote)

See more:

I have 3 TEXTBOXES and a BUTTON in an asp.net page:
There are 3 LABELS next to the three TEXTBOXES
I want the javascript code to validate those textboxes on button click.
The way i need is on button click,all the lables next to BLANK fields becomes visible.ie;I filled only one field and clicked button,then the 2 Lables next to two blank textboxes becomes visible.
when i enter on a blank textbox,the LABEL should become invisible
I used many way to do it through google search,but i didnt get the actual one

please help me to do it

Posted 17-Feb-11 19:06pm

kishore Rajendran

Updated 17-Feb-11 19:18pm

m@dhu

v2

Add a Solution

Comments

arindamrudra 18-Feb-11 1:12am

Please search for the solution first and then post your question.

Sergey Alexandrovich Kryukov 18-Feb-11 1:16am

Is this a school assignment?
--SA

m@dhu 18-Feb-11 1:18am

Removed empty spaces

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

arindamrudra · Answer 1 · 2011-02-17T19:19:00

XML

<script type="text/javascript">
    function validate()
    {
            if (document.getElementById('<%=txtUname.ClientID%>').value == "")
        {
                    document.getElementById('<%=lblUname.ClientID%>').visible = true;
                    document.getElementById('<%=txtUname.ClientID%>').focus();
                    return false;
                }
                return true;
        }
</script>

Call

OnClientClick="return validate();"

For "i enter on a blank textbox,the LABEL should become invisible " part
use onfocus event and call the visible = false; it will work.
Always try first.

Sandeep Mewara · Answer 2 · 2011-02-17T19:29:00

What you are looking for is: Required Field Validator
Here you go:
Required Field Validator Control Sample[^]
Validation - RequiredFieldValidator[^]
ASP.NET RequiredFieldValidator Control[^]

OR

Alternatively, you can do the same by placing your own logic and code on server side in button click.
Steps:
1. On postback, button click, check for textbox content
2. If there is no text then set the label visible proerty to true
3. Repeat 1 & 2 for other 2 textboxes.

Albin Abel · Answer 3 · 2011-02-17T20:00:00

Hi
Sandeep's answer is correct. But strictly if you want to have javascript to do this then here is the example.

You should not challenge any one, because there nothing you can say impossible.

If you are using master and client then you need to have the scripts at Master page's header, otherwise need to inject using the RegisterClientScript method.

so as an example have this at the site master's header section..

As from there the text box and labels not accessible (which are in the content page) you need to get the ID and search for it

XML

<script type="text/javascript"">
  function validateThreeBoxes(boxID1, labelID1, boxID2, labelID2, boxID3, labelID3) {
        if (document.getElementById(boxID1).value == "") {
            document.getElementById(labelID1).style.visibility = "visible";
        }
        if (document.getElementById(boxID2).value == "") {
            document.getElementById(labelID2).style.visibility = "visible";
        }
        if (document.getElementById(boxID3).value == "") {
            document.getElementById(labelID3).style.visibility = "visible";
        }
    }

    </script>

The aspx page can have like this....

XML

<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:Label ID="Label1" runat="server" Text="Text1 Should Not be Empty" style="visibility:hidden"></asp:Label>
</div>
<div>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:Label ID="Label2" runat="server" Text="Text2 Should Not be Empty" style="visibility:hidden"></asp:Label>
</div>
<div>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <asp:Label ID="Label3" runat="server" Text="Text3 Should Not be Empty" style="visibility:hidden"></asp:Label>
</div>
    <input type="button" id="Button1" runat="server"  value="Button1" />

At the page load event...

C#

protected void Page_Load(object sender, EventArgs e)
{
    string textbox1Id = TextBox1.ClientID;
    string label1Id = Label1.ClientID;
    string textbox2Id = TextBox2.ClientID;
    string label2Id = Label2.ClientID;
    string textbox3Id = TextBox3.ClientID;
    string label3Id = Label3.ClientID;
    Button1.Attributes.Add("onclick", "validateThreeBoxes('" + textbox1Id + "','" + label1Id + "','"  + textbox2Id + "','" + label2Id + "','" + textbox3Id + "','" + label3Id + "');");
}

now you can see it working..

Javascript Validation of Multiple Textboxes

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0