Solved

control focus, clear and validation

Posted on 2008-06-10
7
303 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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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 code hide show and toggles. 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…

770 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