aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes jQuery-How to highlight invalid input field value after getting validation error Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "jQuery-How to highlight invalid input field value after getting validation error" Watch "jQuery-How to highlight invalid input field value after getting validation error" New topic
Author

jQuery-How to highlight invalid input field value after getting validation error

Melinda Savoy
Ranch Hand

Joined: Jun 21, 2005
Posts: 387

I am trying to do a simple form validation using the .validate method. What I'm trying to accomplish is when I tab to the next field from the batch number field in the form I get the validation error text displayed next to the batchNumber field when I enter an alpha character and that's fine however I would like for the error value in the batchNumber field to be highlighted before the cursor gives focus to the next field in the form so that the user can make the correction before continuing.

Is there a way to accomplish that using the validation plugin? I tried looking for a select or selection method but cannot find one. Any help or direction would be appreciated. Regards.

Here is my validation code:

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61218
    
  66

It's not clear exactly what you are asking for, but it sounds like it could be a simple matter of applying CSS rules.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Melinda Savoy
Ranch Hand

Joined: Jun 21, 2005
Posts: 387

Let me try to clarify. When I'm on my form I enter an alpha character in the batchNumber field and when I tab to the NEXT field, using the validation plugin, I get the validation error next to the batchNumber input field on the form. However, instead of giving focus to the next field that I tabbed to, I would like for the value that I typed in the batchNumber input field to be highlighted so that the user can correct the error and enter a NUMBER and not an alpha character (specified by the number: true in the validation code above). Is that any more clear?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61218
    
  66

Wow... I would find that really really annoying. Are you sure that you want to tick off all your users?

The validation plugin is designed to highlight the field as in error and to prevent the user from submitting the form until all fields are correct. But preventing a user from leaving a field until it is correct is really poor interaction technique. I'd rethink the approach.

That said, I suppose you could establish a blur handler on the field and force focus to it if it is in error, but I'd strongly suggest against it.
Melinda Savoy
Ranch Hand

Joined: Jun 21, 2005
Posts: 387

Good advice. Thanks for your input.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61218
    
  66

My pleasure -- been working in the UI field for over 25 years and cringe when I see overly-restrictive systems.

By the way, you may have noticed that the validation plugin marks fields that are in error with a class that you can use to highlight the fields visually via CSS.
Melinda Savoy
Ranch Hand

Joined: Jun 21, 2005
Posts: 387

I did notice the HIGHLIGHT example. Thanks again for the help.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: jQuery-How to highlight invalid input field value after getting validation error