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