.submit() provides users with feedback upon submission of the form. Be sure to use
& instead of
&& so that users get all the error messages at once. – There is nothing more annoying than to get drip-fed error messages each time you click ‘submit’.
1 2 3 4 5 6 7 8 9
I would argue that giving users feedback upon submission is too late, because it requires the user to go back to the top and reconsider every input field again, which requires more mental effort than if feedback was given at each input field, before the brain is occupied with considering a new topic
To this end,
.blur() is very useful.
.blur() is triggered when the user leaves a particular form input field, that is, as soon as it appears that a user is ‘done’ with that field.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
In my code, even though I added
.blur() validation for each input field, I also kept my
.submit() validation to prevent the form from being submitted unless all conditions were met.
This provides even more immediate feedback than
.blur(), as the feedback can be provided ‘live’ as each key is pressed and released.
Real-time feedback may not be appropriate for every single field. For example, it might be annoying to get a live commentary as you are trying to pick a username.
However, it can be used to great effect for specific cases. For example, it is mostly commonly used to give real-time feedback on password strength as users are choosing their password.
In my form, I chose to use
.keyup() during password choice (to indicate password strength, even though I am not requiring a ‘strong’ password), as well as for the validation of confirmation emails and passwords.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
Finally, I have also used
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
.text() to dynamically change the feedback message to the user, indicating whether a password is “weak”, “medium” or “strong”.
I also used
.addClass() to give visual feedback to users though changing the styling of feedback messages (in my case, toggling between ‘green’, ‘amber’ and ‘red’ traffic light colors).
Resulting form with errors displayed: