Solved

control focus, clear and validation

Posted on 2008-06-10
7
301 Views
Last Modified: 2013-11-19
I have a form with textbox, dropdown and radiobutton controls. When the user submits the data, I need the form to validate the data.

Now, I know I can use alert messages or labels for it; but I want the error messages to be dynamic. What I have done is that I've decided to shwo the error in the textboxes or highlight the controls themselves when the data is wrong or not entered. To do this all for all the controls is a bit tedious though. Is there any "shortcut" method where I can define the color and highlighting for all the controls which contain invalid data?

Secondly, I want that when the user tries to focus on the controls to enter the correct information, all the highlighting and error should disappear. Again, to do this for all the controls is proving to be a bit complicated. Is there any easier method to write the code for the 'disappearing act' for all the controls the user focuses on at once?

I'm using ASP.Net.

I even tried CSS; but being novice, I couldn't really make it work that way.
0
Comment
Question by:digitalZo
  • 4
  • 3
7 Comments
 
LVL 3

Expert Comment

by:NIMTUG_Simon
ID: 21749407
With ASP.Net there are a set of validation controls which you use to do this.

What you do is assign 1 or more validation controls to your page for each control and then if they fail the message associcated to the validation control is shown in the validation summary control.
0
 
LVL 10

Author Comment

by:digitalZo
ID: 21749484
I know there's required validation controls; but I'd like solution for the problem which I posted above. Using ClientID is there any way, I can define one colour for all textbox or dropdown controls?
0
 
LVL 3

Expert Comment

by:NIMTUG_Simon
ID: 21749548
Can I make a suggestion that you don't try and make a UI which can confuse end-users, replacing error input with messages isn't what people are used to.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 10

Author Comment

by:digitalZo
ID: 21749791
<<<Can I make a suggestion that you don't try and make a UI which can confuse end-users, replacing error input with messages isn't what people are used to.>>

Thanks for the suggestion, but I'm not replacing error input with messages. What I'm doing [or want] is that when the user enters incorrect data and clicks the submit, the error message displays in the control itself. the problem is that i dont want to code this for each and every control.. therefore i was asking whether i can use clientid to code the background color and forecolor of the controls to validate.
0
 
LVL 3

Expert Comment

by:NIMTUG_Simon
ID: 21753907
ClientId is used to find out what the controls id is once it is rendered to html on the browser. You would use this then in Javascript on the client to identify the control.

Are you wanting to do the validation on the client side (using Javascript) or post the values back to the server and check them using your server side code (VB.Net or C#)?

Either way you will have to define a set of css styles and what you do is to change the class attribute on the client side or the CSSStyle property on the server (not both)
0
 
LVL 10

Author Comment

by:digitalZo
ID: 21757139
<<<Are you wanting to do the validation on the client side (using Javascript) or post the values back to the server and check them using your server side code (VB.Net or C#)?>>>

Server side. VB.Net.

<<<
Either way you will have to define a set of css styles and what you do is to change the class attribute on the client side or the CSSStyle property on the server (not both)>>>

I did that. but it doesn't seem to change the style when the data is correct. perhaps because i'm a novice at it and havent coded it properly. can you show me how to do it?

i've used javascript coding when the user focuses on the control after the error is displayed. something like this:
txt_custname.Attributes.Add("onFocus", "this.value=''; this.style.backgroundColor = 'white'; this.style.color = 'black';")

while the server side code is this:
IF Regex.IsMatch(Me.txt_custname.Text, alphabet) = False Then
            'err_label.Visible = True
            'err_label.Text = "Only Alphabets are allowed!!"
            'MsgBox("Only Alphabets are allowed", MsgBoxStyle.Information, "Error Message!!!")
            'SetFocus(txt_custname)

            txt_custname.Text = "Only Alphabets are allowed"
        Else
            txt_custname.BackColor = Drawing.Color.White
            txt_custname.ForeColor = Drawing.Color.Black
        End If
0
 
LVL 10

Accepted Solution

by:
digitalZo earned 0 total points
ID: 21757142
Sorry forgot to add this function:

IF Regex.IsMatch(Me.txt_custname.Text, alphabet) = False Then
            err_color()
            txt_custname.Text = "Only Alphabets are allowed"

End if

 Protected Sub err_color()
        txt_custname.BackColor = Drawing.Color.MistyRose
        txt_custname.ForeColor = Drawing.Color.Red
    End Sub
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now