Required Field Validator to display when user hits tab key not submit button.

Question

0.00/5 (No votes)

See more:

Is there a way to set the RequiredFieldValidator to display when a user hits the TAB key and leaves the textbox empty? I have tried to set the Display Property from Static to Dynamic and tested and nothing happened. Can someone show me what is needed for this?

ASP.NET

<%@ Page Language="C#" AutoEventWireup="True" Inherits="Login" Codebehind="Login.aspx.cs" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>SACSCOC Login</title>
    <style type="text/css">
        .style1
        {
            font-size: x-large;
            }
        .style2
        {
            width: 100%;
            height: 130px;
        }
        .style3
        {
            width: 573px;
            text-align: right;
        }
        .style4
        {
            width: 188px;
        }
        .style5
        {
            text-align: left;
        }
        .style6
        {
            width: 188px;
            text-align: center;
        }
        .style8
        {
            width: 585px;
            height: 137px;
        }
        .style10
        {
            color: #0000FF;
        }
        .style11
        {
            width: 100%;
        }
        #form1
        {
            text-align: center;
        }
    </style>
</head>
<body background="Images/bkg-blu.jpg">
    <form id="form1" runat="server">
    <div class="style1">
        <table class="style11">
            <tr>
                <td class="style5">
                    </div>
    <table class="style2">
        <tr>
            <td class="style3">
                ^__strong__^UserName</strong></td>
            <td class="style4">
                <asp:TextBox ID="TextBoxEA" runat="server" MaxLength="50" Width="180px"></asp:TextBox>
            </td>
            <td class="style5">
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                    ControlToValidate="TextBoxEA" ErrorMessage="You Must Enter A UserName!!!" 
                    ForeColor="Red"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td class="style3">
                ^__strong>Password</td>
            <td class="style4">
                <asp:TextBox ID="TextBoxPW" runat="server" MaxLength="15" TextMode="Password" 
                    Width="180px"></asp:TextBox>
            </td>
            <td class="style5">
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                    ControlToValidate="TextBoxPW" ErrorMessage="You Must Enter The Password!!!" 
                    ForeColor="Red"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td class="style3">
                 </td>
            <td class="style4">
                 </td>
            <td class="style5">
                 </td>
        </tr>
        <tr>
            <td class="style3">
    
        ^__strong style="text-align: left">
                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/SubmitPage.aspx" 
                    style="text-align: center">New User Registration Here</asp:HyperLink>
        
    
            </td>
            <td class="style6">
                <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Login" 
                    Width="106px" style="text-align: center" />
            </td>
            <td class="style5">
                <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/ForgotPassword.aspx"
                    
                    style="text-decoration: underline; color: #0000FF; font-weight: 700; font-size: large" 
                    ForeColor="#FFCC00">Forgot Password</asp:HyperLink>
            </td>
        </tr>
    </table>
    <asp:Label ID="lblMessage" runat="server" Font-Bold="True" 
        Font-Names="Times New Roman" Font-Size="Medium" ForeColor="Red"></asp:Label>
    </form>
</body>
</html^__b>>

Posted 4-Nov-13 2:45am
Computer Wiz99

Updated 4-Nov-13 12:57pm

v2

Add a Solution

Comments

JasonMacD 4-Nov-13 8:57am

You'll probably have to use javascript/jquery for this one: http://stackoverflow.com/questions/14889732/how-to-trigger-an-event-after-hitting-tab-key-in-textbox

Computer Wiz99 4-Nov-13 8:58am

Ok, Thanks. I don't know javascript and I am using C#. Any way to set this is the properties window?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Nov-13 13:54pm

The message should show on Tab key press. Show your code please.

Computer Wiz99 4-Nov-13 18:57pm

I have added the code. Sorry for the long wait.

3 solutions

Top Rated

Most Recent

Please Sign up or sign in to vote.

Solution 1

Accept Solution Reject Solution

add display="dynamic" for the validator
like this....

XML

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" Display="Dynamic" SetFocusOnError="true" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>

Permalink

Share this answer

Posted 5-Nov-13 0:22am
Raajkumar.b

Comments

Computer Wiz99 5-Nov-13 10:15am

Raajkumar.b, it still will not fire when I press the Tab Key with the texrbox left empty.

[no name] 6-Nov-13 1:28am

These property are platform dependent. It works with Internet explorer. Check it out !

Raajkumar.b 6-Nov-13 2:27am

nope. It will work in all browsers i checked it.

Please Sign up or sign in to vote.

Solution 2

Accept Solution Reject Solution

copy this code and try it i have got the solution. if there is any problem in it let me know again...

code:
design page(aspx):

XML

<form id="form1" runat="server"> <div> <br /> <br />                     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" Display="Dynamic" SetFocusOnError="true" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator> <br /> <br />                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2" Display="Dynamic" SetFocusOnError="true" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator> <br /> <br />                    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> </div> </form>

aspx.cs page:

C#

protected void Page_Load(object sender, EventArgs e) { Page.Validate(); } protected void Button1_Click(object sender, EventArgs e) { }

Permalink

Share this answer

Posted 5-Nov-13 17:21pm
Raajkumar.b

Comments

Computer Wiz99 5-Nov-13 23:26pm

Ok, Raajkumar.b. I will try it and let you know in the morning.

Please Sign up or sign in to vote.

Solution 3

Accept Solution Reject Solution

RequiredField validators wont be triggered in a Tab Key press. You may have to consider using javascript for the same.

http://stackoverflow.com/questions/19020621/on-pressing-tab-key-without-any-data-in-text-field-it-should-show-required-field[^]

http://forums.asp.net/t/1376939.aspx[^]

Hope this helps

Permalink

Share this answer

Posted 5-Nov-13 17:54pm
JoCodes

Comments

Computer Wiz99 6-Nov-13 0:04am

JoCodes, javascript can be used but also disabled by the user. I need c# code to still run this function.

JasonMacD 6-Nov-13 12:25pm

If a user disables Javascript no websites would work. That is an old outdated philosophy, javascript is used everywhere in most every website these days. Even some of asp.net functionality is compiled into javascript.

Add a Solution

Add your solution here

Plain Text
ASM
ASP
ASP.NET
BASIC
BAT
C#
C++
COBOL
CoffeeScript
CSS
Dart
dbase
F#
FORTRAN
HTML
Java
Javascript
Kotlin
Lua
MIDL
MSIL
ObjectiveC
Pascal
PERL
PHP
PowerShell
Python
Razor
Ruby
Scala
Shell
SLN
SQL
Swift
T4
Terminal
TypeScript
VB
VBScript
XML
YAML

OKPaste as

Strip HTML
Encode HTML
Paste as-is
Code block
Quoted Text
Best guess

To display as

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

Submit your solution

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)

Raajkumar.b · Answer 1 · 2013-11-05T00:22:00

Solution 1

add display="dynamic" for the validator
like this....

XML

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
            ControlToValidate="TextBox1"  Display="Dynamic" SetFocusOnError="true" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>

Posted 5-Nov-13 0:22am

Raajkumar.b

Comments

Computer Wiz99 5-Nov-13 10:15am

Raajkumar.b, it still will not fire when I press the Tab Key with the texrbox left empty.

[no name] 6-Nov-13 1:28am

These property are platform dependent. It works with Internet explorer. Check it out !

Raajkumar.b 6-Nov-13 2:27am

nope. It will work in all browsers i checked it.

Raajkumar.b · Answer 2 · 2013-11-05T17:21:00

copy this code and try it i have got the solution. if there is any problem in it let me know again...

code:
design page(aspx):

XML

<form id="form1" runat="server">
    <div>

        <br />
        <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
            ControlToValidate="TextBox1" Display="Dynamic" SetFocusOnError="true" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
        <br />
        <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
            ControlToValidate="TextBox2" Display="Dynamic" SetFocusOnError="true" ErrorMessage="*" ForeColor="Red"></asp:RequiredFieldValidator>
        <br />
        <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

    </div>
    </form>

aspx.cs page:

C#

protected void Page_Load(object sender, EventArgs e)
   {
       Page.Validate();
   }
   protected void Button1_Click(object sender, EventArgs e)
   {

   }

JoCodes · Answer 3 · 2013-11-05T17:54:00

Solution 3

RequiredField validators wont be triggered in a Tab Key press. You may have to consider using javascript for the same.

http://stackoverflow.com/questions/19020621/on-pressing-tab-key-without-any-data-in-text-field-it-should-show-required-field[^]

http://forums.asp.net/t/1376939.aspx[^]

Hope this helps

Posted 5-Nov-13 17:54pm

JoCodes

Comments

Computer Wiz99 6-Nov-13 0:04am

JoCodes, javascript can be used but also disabled by the user. I need c# code to still run this function.

JasonMacD 6-Nov-13 12:25pm

If a user disables Javascript no websites would work. That is an old outdated philosophy, javascript is used everywhere in most every website these days. Even some of asp.net functionality is compiled into javascript.