Win a copy of Functional Reactive Programming this week in the Other Languages forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

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

 
Melinda Savoy
Ranch Hand
Posts: 387
Eclipse IDE Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65225
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
It's not clear exactly what you are asking for, but it sounds like it could be a simple matter of applying CSS rules.
 
Melinda Savoy
Ranch Hand
Posts: 387
Eclipse IDE Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65225
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 387
Eclipse IDE Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Good advice. Thanks for your input.

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65225
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 387
Eclipse IDE Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I did notice the HIGHLIGHT example. Thanks again for the help.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic