4

Today in any form, we can have real-time validation like in example below

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The question is: When should I trigger the validation: as soon as possible ? (seems good for the name error, but bad for the email field: it will mark invalid but the user hasn't stop typing yet)

On focus out ? (seems good but you need to move back to the field to correct it, instead of knowing immediately)

On focus out the first time, as soon as possible the second time?

Is there a mix between the two that is better? Does it depend on the type of validation error?

Many thanks,

P.S: We also have a final validation just before the Submit button, so that users are redirected (through links) to the invalid fields. I know of this answer: Form validation - When should error messages be triggered? but I would like other insights

  • 2
    I'm glad you're thinking about this. My belief is that we should give the user a chance to be correct before we tell them they've got it wrong. Design the software so it treats users the way you'd want to be treated. by a person. Can you imagine someone telling you, while starting to enter a phone number: "No! That's wrong. Your phone number requires 8 more digits," and so on. But let's see what the research says…. – JeromeR Nov 23 '15 at 16:53
  • Just as a side note: Place the labels above the input field instead of putting them to the left as in your example. – Ilias Bennani Nov 13 '17 at 13:23
4

If you're validating for characters, it makes sense to validate as you type.

If you're validating the string, something more like the structure (i.e. the email) it makes sense to validate on blur/focus-out.

Probably letting the user know what's allowed beforehand would be a good idea also.

1

For Email field:

You may start background client side scripts post the user types @.

  1. If the user types "gm" or "yah", suggest the user possible alternatives like "gmail" or "yahoo" in a drop down menu in such a way that it doesn't disturb the user.
  2. On the other end if the user enters example domains like test.com or example.com you can show an error message instantly.
  3. In case of typos like gmaal.com you may change the input box border color to red and say " Did you mean gmail.com?" etc.
  4. Lastly on lost focus, you may check whether the email entered exists in the db and show a error (red tick symbol) or OK (green tick symbol) signal respectively.
  5. Turn off the invalid characters buttons by default to reduce probability of error.

For Name field:

  1. Turn off the invalid characters buttons by default to reduce probability of error.
  2. Validate as they type.

You may want to check every input server side post the submit button is clicked as a precaution/confirmation.

0

In my experience triggering individual field validation on 'focus out' works well. It allows the user to complete / edit their typing without the feeling of being told they're wrong before they finish. Also it informs them at their point of focus - reducing the need to search around the form to find the fields with errors.

0

Upon blur, validate the field. If invalid, focus back on the erroneous field.

  • 1
    I strongly advocate against automatically forcing focus back to the invalid input. It's wrenching control away from the user and could be especially disorientating for screen reader users. – Simon Hudson Nov 30 '15 at 8:13
  • With proper messages and error displays, a user will be appreciate that they didn't wait until clicking submit to see their error. Plus, I'm a fan of keeping their hands on the keyboard as much as possible. Power users tabbing down a list of fields will be ready to delete and re-type, and normal users can adjust accordingly. Agreed it is not the best for sr accessibility purposes – Kyle Alwyn Nov 30 '15 at 20:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.