JavaScript & jQuery form validation
Constraint validation CSS pseudo Selectors
disabled, invalid, optional, required, valid
Constraint validation HTML input attributes
disabled, max, min, pattern, required, type
Validation is best positioned
immediately next to the action in hand.
Same page reload- Optimized result to staples error page to make this better
poor experience
Which points to the use of instant validation wherever possible
this is simply because users can assess their errors as they arrive instead of being overwhelmed at the end.
"error fields only" approach is usually best
when inline validation wouldn't quite work. The longer the form and the more complex the inputted data and its dependencies, the more likely the _ is the best choice.
Same page reload validation
which is used once a form has been submitted, before reloading the page with errors displayed
Instant validation
which occurs as the user is typing or selecting form elements
Instant validation
works best in principle for creating the conversation between user and for that manages to gamify the often tedious process of form inputs.
Above the label
works best on long forms where the validation is on same page reload. After page reload, the user should be back at the top of the form where scrolling down first reveals the error message then the question and erroneous field input in turn. This allows the user to mentally focus on the error in hand before attempting to address it. For this same reason this positioning is far superior in the accessibility stakes, screen reader users will first come across the problem then have an attempt to address said problem. Another benefit is that it's unlikely that the message will be cut off by the browser window when power uses tab through the form.
instant validation on right hand side of inputs
works extremely well on desktop and for instant validation, as the user types, the form appears to be having conversation with you. It also benefits by not pushing other page elements around. Works extremely well for positive validations as it doesn't distract from the main focus of the page, the inputs themselves. aligning validation to the right of the field can't be used on mobile anyway
validation messaging should be
close as possible to the action
Data Format Validation
Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.
invalid
Selects input elements with invalid values
optional
Selects input elements with no "required" attribute specified
Disabled
Selects input elements with the "disabled" attribute specified
required
Selects input elements with the "required" attribute specified
valid
Selects input elements with valid values
Same page reload- Optimized third change to staples error page to make this better
A tailored message for each erroneous field shows either an example of correctly formatted data (for example, [email protected]) or a tip on what might be wrong with the data (for example, "Looks like the ending in the email address you provided is missing (.com, .org, etc.)," instead of just "Email wrong — please correct."
there are three different possible times for displaying instant validation
After, During, Before and during
encapsulated flags, tool tips
Although this is often cited as being a bad approach due to lack of accessibility by screen readers, there are ways around this. Instead the main concern with this approach is that it requires a lot of bespoke work in each application due to its talent of concealing important information surrounding the input. Whether it is above, below or to the side, concealing the question, hints or help boxes (or even the input itself) is a big usability no-no.
5 rule of form validation
Always explain the validation error in a written message
Html constraint validation is based on
Constraint validation HTML input attributes, Constraint validation CSS pseudo selectors, Constraint validation DOM properties and methods
8 rule of form validation
Display messages directly above the question title
Basic Validation
First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.
10 rule of form validation
Ensure your validations work in every application and are always colour contrast accessible (use coloured backgrounds)
Below inputs
For instant validation, this is the natural location for most conversational messaging that couldn't be displayed in the favorable position of the side. This is due to it being the focus of the users attention directly after inputting a field as they scroll down the page.
6 rule of form validation
For this message use positive and helpful language
Typical validation tasks are
Has the user filled in all required fields? Has the user entered a valid date? Has the user entered text in a numeric field?
9 rule of form validation
Increase the highlighting erroneous fields by outlining input fields in red
When the time comes for validation messaging, although nice and conversational, it is often distracting and time consuming to have copy for successful inputs
Instead, focus on concise, directional, friendly copy for you error messages. Avoid long list summaries of errors at the top of your page, instead state there are errors on the page for the users to find by your obvious signposting.
Data validation
Is the process of ensuring that user input is clean, correct, and useful
form validation
Is the process used by form dialogs to alert users of errors in their submission
Html form validation can be done by
JavaScript
Before and during validation
Messages are displayed as soon as user focuses on form element and updates whilst they answer
Disabled
Specifies that the input element should be disabled
required
Specifies that the input field requires an element
max
Specifies the maximum value of an input element
min
Specifies the minimum value of an input element
type
Specifies the type of an input element
pattern
Specifies the value pattern of an input element
After validation
Success or error message is displayed after the user has clicked or tabbed out of input field
below the inputs
The down side of this styling is that in long forms, where same page reload validation is required, users scrolling down the page only view errors after scanning over the question and input. After seeing this message users have to go back and reread the question and answer again in attempt to correct it. It might not be the worst of usability sins but can be frustrating when questions are particular complex or long.
Same page reload- Optimized first change to staples error page to make this better
The error description at the top indicates the number of errors (if there's more than one) and lists them
Error fields only approach
The user now gets a new page, or an overlay, with just a couple of error fields. A summary of the validated data would also be displayed, along with an "Edit" link in case the user spots something they want to correct.
Same page reload- Optimized second change to staples error page to make this better
These listed errors are links that take the user directly to the corresponding field (especially important in long forms).
Being returned to the exact same page is problematic for a couple of reasons
With all form fields still displayed (valid or not), the user might have difficulty identifying the few erroneous fields among the many valid ones or More critically, seeing the same page twice makes it seem like the user has made no progress, despite having just filled in numerous form fields correctly.
4 rule of form validation
Use green and ticks for success
1 rule of form validation
Use instant validation only for difficult to answer (and finite) questions
3 rule of form validation
Use red copy and exclamation mark icons for errors
7 rule of form validation
Use the holy trinity of colour change, message text, and icons for accessible validation
ALWAYS DISPLAY VALIDTION
WITHIN THE CONTEXT OF THE ACTION
same page reload validation
When the user first submits the page, the entire page is reloaded, but with indications of validation errors. A message at the top of the page tells the user they have made an error and describes what the error is; further down the page, the label for the erroneous field is in bold and red.
2 rule of form validation
When using instant validation display messages after the user has input answers (with a 10ms delay)
Client side validation is performed by
a web browser, before input is sent to a web server
Server side validation is performed by
a web server, after input has been sent to the server
same page reload on long forms, form field validation is best displayed
above the question label so users don't repeat themselves, and miss messages.
Use clear language
always try to reassure the user, not blame them for their mistakes. It is all too common, that users blame themselves for problems in web design. Compounding that further with aggressive and unhelpful language only pushes them off your site. Instead, if there are particular requirements for a field, always stipulate them clearly upfront and save everyone the hassle of reminding them through validation.
Html form validation can be performed
automatically by the browser
Grouping validation messages at the top or bottom of a page away from the inputs in question separates the link between inputs and errors and should be
avoided at all costs.
JavaScript Form validation generally performs two functions
basic & data format validation
Below the label above the input
benefit of being closer to the erroneous action, but fails due it being generally quite confusing as it splits the question from the input. If an error list is extremely long, say for creating a new password, the question can get visually lost within the clutter.
Inline validation alleviates the aforementioned issues
by indicating progress and by pointing out the erroneous fields (since the page does not reload).
adding validation to questions that a user would normally fly through (and we have no idea of whether its correct or not) validation
can slow down users and can come across as a pointless gimmick.
Above the label
downside of this approach is that it is possible to be overlooked in instant validation purposes, specifically on mobile, as the user is already moving onto the next question through scrolling or clicking it is possible they won't see the message that appears above the fields they've just read and answered. It also pushes down content below throwing users off their location in instant validation application.
instant validation on right hand side of inputs
downsides are that when used for same page reloads, there is a potential for the messages to be skipped over, especially long forms due to users scanning pages in an F shaped pattern. On mobile, this approach can rarely be used, resulting in messaging defaulting to above or below the question anyway. With inline elements, where submit buttons are immediately to the right of inputs, this approach can't be used either.
Live inline validation
each form field is validated separately as the user types. The error handling is most often instant, with the user being told that their data doesn't match the expected format (although the user can scroll past and try to submit the form anyway)
Most often the purpose of data validation is to
ensure correct user input
On smartphones, the error-fields-only approach
has an advantage over the same-page-reload technique, because users typically lack an overview and context of the form due to the small screen. In such cases, displaying only the erroneous fields would help the user focus on the task at hand
Live inline validation
has the drawback of an inconsistent UI, whereby some fields are validated live while others aren't.
All inputs that have an infinite answer or limitations
have the possibility of instant validation.
the after validation method
helps users to complete forms more quickly. This is due to users in the other two buckets typing one character at a time to check it was correct or getting frustrated when an error message was displayed before they had completed their input
In general terms there are two vairants of validation implementation
instant & same page reload validation
the most commonly used moments to display validation are
instantly, and once a page has been submitted. Ideally...
Instant validation
is also not possible on inputs that have a default, such as radio buttons or some select drop downs.
Instant validation
is best positioned to the right hand side of the input, or failing that immediately below.
The main reasoning though for universal application
is ease in the long run. Better to have easily maintained rules that work for the user but aren't geospecific than a scattergun of interconfusable, but locally superior, interactions that can be forgotten, outdated and worst of all.... Off brand.
Consistency
is extremely appointment in usability and validation is no exception, if success messages appear beside some fields but not others, users may assume there was something erroneous with their input, slowing down completion rate and confidence.
The error-fields-only approach
is more an attempt to inspire and a call to action to rethink how we handle validation errors and thus provide a better user experience.
same page reload validation
is significantly better than the sad practice some websites adopt of only highlighting the erroneous field in red or bold (without any description) and letting the user guess what went wrong. But the implementation could be much more thorough.
Use the right color (and the right icons)
it is best to stick to the use of red for errors and green for success.
Error fields only approach
makes the error page much more digestible than the traditional technique, and it makes abundantly clear which fields are the problem, which is particularly helpful in long forms
Live inline validation
makes the technique useful for forms in which the fields can be validated independently.
During validation
messages are displayed as the user begins typing (or selecting)
the page reload techniques (the traditional and newer versions)
might be best even for simple forms.
The pretense of not using red as it is the colour
most associated with danger, and could scare off your weak hearted customers, has always seems stretched.
JavaScript Form validation
normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button.
JavaScript is often used to validate
numeric input
JavaScript Form validation provides a way to validate form's data
on the client's computer before sending it to the web server.
The right time to inform about the success/failure of provided data is
right after the user has submitted the information
The traditional way
same page reload
Instant validation
should only be used for complicated question or easy to answer question, such as; what is your name, what is your gender etc, instant validation can do more harm than good as it is generally confusing;
Automatic HTML form validation If a form field (fname) is empty
the required attribute prevents this from being submitted
JavaScript Form validation If the data entered by a client was incorrect or was missing
the server would have to send all the data back to the client and request that the form be resubmitted with correct information.
If a user can't see an error message or likewise find the inputs
they will very rapidly get frustrated and bounce
If a form field (fname) is empty
this function alerts a message, and return false, to prevent the form from being submitted
