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

[Melinda Savoy]

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:

$("#ARTransferForm").validate({ 
   rules: {
 
      // Validate INPUT FIELDS: 
      "ARTransferForm:batchNumber": {
           required: true,
           number: true,
           minlength: 10,
           maxlength: 10
      }
   }
});

[Bear Bibeault]

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]

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]

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]

Good advice. Thanks for your input.

[Bear Bibeault]

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]

I did notice the HIGHLIGHT example. Thanks again for the help.