RequiredFieldValidator BUT highlight the textbox

I have a page with lots of fields (it's a job application page). Right now, i have , for example, the code below. I put a red * next to the textbox that should be filled out and I popup a msg.

What I want to do is to highlight the textbox..instead  of having a red star next to the textbox. When user enters in the textbox (fills out required fields), I want the color to go away. Just like the *. When user fills in the required field, the star goes away..

anyway of doing this?
LVL 7
CamilliaAsked:
Who is Participating?
 
rajapandian_81Connect With a Mentor Commented:
One more option you can do javascript validation. Which will meet your needs.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<!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 runat="server">
    <title>Untitled Page</title>
</head>
<body>
<script type="text/javascript" language="javascript" >
            
function ValidateFields()
{
    var retvalue = true;
    
    if (document.getElementById('<%= TextBox1.ClientID %>').value == '')
    {
        document.getElementById('<%= TextBox1.ClientID %>').style.backgroundColor = 'red';
        retvalue = false;
    }
    if (document.getElementById('<%= TextBox2.ClientID %>').value == '')
    {
        document.getElementById('<%= TextBox2.ClientID %>').style.backgroundColor = 'red';
        retvalue = false;
    }
    if (document.getElementById('<%= TextBox3.ClientID %>').value == '')
    {
        document.getElementById('<%= TextBox3.ClientID %>').style.backgroundColor = 'red';
        retvalue = false;
    }
    
    return retvalue;
}
            
</script>
    <form id="form1" runat="server">
    <div>    
        <table >
            <tr>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" onkeyup="if (this.value != '') { this.style.backgroundColor = 'white' }"></asp:TextBox>                    
                </td>
            </tr>
            <tr>
                <td>                
                    <asp:TextBox ID="TextBox2" runat="server" onkeyup="if (this.value != '') { this.style.backgroundColor = 'white' }"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:TextBox ID="TextBox3" runat="server" onkeyup="if (this.value != '') { this.style.backgroundColor = 'white' }"></asp:TextBox>
                </td>                
            </tr>
            <tr>
                <td>
                    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return ValidateFields();" onclick="Button1_Click" />
                </td>               
            </tr>           
        </table>    
    </div>
    </form>
</body>
</html>

Open in new window

0
 
guru_samiCommented:
0
 
masterpassConnect With a Mentor Commented:
Yes, you can do this by validation callout extender....

http://www.asp.net/ajax/ajaxcontroltoolkit/samples/ValidatorCallout/ValidatorCallout.aspx 

you can avoid the callout and just use the style for the textbox
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
CamilliaAuthor Commented:
do i still need to have the required field validator there?
"To use this control, add an input field and a validator control as you normally would. "

Is that correct>
0
 
masterpassCommented:
you should still have required field validator...

validation callout extender is just an extender to your validator which is already present

0
 
CamilliaAuthor Commented:
anyway to turn off that popup and just have the textbox background color? i cant find examples of turning off the popup..
0
 
masterpassCommented:
If you go thro the site, you will see a ValidatorCallout Theming  section you can apply all the css there so thatthe popup is not shown
0
 
guru_samiConnect With a Mentor Commented:
I think that's not possible without modifying the actual validatorCallout Extender code in the ToolKit
Or may be extending the existing validators.
May be you can think of jQuery validate plugin instead.
0
 
CamilliaAuthor Commented:
with the javascript one, i need to remove the red when user types in the textboxes. I think Javascript has to return true somehow...how can i make that change?
0
 
rajapandian_81Commented:
In TextBox onkeyup event, I have given code to remove red color.
0
All Courses

From novice to tech pro — start learning today.