jQuery validation and user journey

Having a battle with when to show my error messages. My code is below, but basically, the form should validate the input fields on BLUR. Which for the most part is fairly acceptable.

What I need to do though, is only make the validation appear on blur IF the next thing they click on is NOT the help icon next to the field.

My client has come back saying this is not a good user journey if they tab into a field, then leave it to click on the help (triggering the blur function), and when they click on help, because the field loses focus, it tries to validate it and the user is given the error message without actually entering anything.

I can't check if the field is empty before trying to validate, because it i开发者_StackOverflow社区s a required field, and I need the error to also appear if the field is left empty.

It's a bit hard to explain, but hopefully I've done ok.

HTML

    <div class="question" id="PD_email">

 <label>Email address</label>
 <input class="v-middle jsValid_email" id="email" type="text" size="50" />
 <label class="inline helpTrigger cursor">Why do we ask for this?</label>

 <div class="hidden help rounded03 aboveTrigger" style="left:385px;" id="emailAddress_help">
  HELP MESSAG IN HERE
 </div>

 <div class="error hidden">
  ERROR MESSAGE IN HERE
 </div>

</div>

<div class="question" id="PD_phone">

 <label>Phone number</label>
 <input class="v-middle jsValid_phone" id="phone" type="text" size="50" />
 <label class="inline helpTrigger cursor">Why do we ask for this?</label>

 <div class="hidden help rounded03 aboveTrigger" style="left:385px;" id="emailAddress_help">
  HELP MESSAGE IN HERE
 </div>

</div>

jQUERY SCRIPT

 $('input').blur(function() { 
         if ($(this).hasClass('jsValid_email')){
     if (($(this).val()=='') && ($(this).hasClass('jsOptional')))
  {/* do nothing*/}
  else {
  email(this.id);
        }

This then calls a function which validates the specific type of input field (email, phone, alpha, dob etc etc) then if it fails the validations checks ON BLUR, it colours the fields and labels red.

So if there is any way of coding a if (!($(this).siblings('.help').click())) type event, that would be handy!

Thanks, Kevin

The blur event does not know where you are going to so this cannot be done in quite that way. You need to make the validation happen later, and I can see two options:

1. setTimeout. Run the validation at a times later point, and hope that the Focus event on the help button has been run, which should flag that the validation should not happen. This is risky, but simple to achieve.

2. Do the validation call on every other controls Focus event, so that when it occurs you know what control has the focus. This is an issue if you have a large or complex form, and cannot easily identify every other control. You should flag on the Focus event of the specified field that this needs validating ( not the blur, because the event order is not defined or consistent ), and only proces this if it is required.

Of course, in either of these cases, you will have to set the focus back to the failing control. If you require this on multiple controls then the best option is submit validation, even though they may not be happy with this. The complexity of trying to handle this procesing on multiple controls would do my head in.

( and yes, I realise you have probably sorted it by now, but for anyone else, they might be interested )