- Tip 01: Use the Correct HTML Input Types
- Tip 02: Built-in HTML Validators
- Tip 03: Using Regex for Pattern Matching
- Tip 04: Custom Tooltip Validation Messages
- Tip 05: Create Custom Tooltip Messages with JavaScript
- Tip 06: Avoid Early Validation
- Tip 07: Specific Validation Messages
- Tip 08: Static Height for Error Messages
- Tip 09: Highlight Errors with Danger Indicators
- Tip 10: Remove Error Messages When Fixed
- Tip 11: Indicate Required Fields With Red asterisk
- Tip 12: Always Perform Server-side Validation
- Tip 13: Ensure your form is not only usable but also accessible
If you set the input type as "text" for a password field, the password will not be obscured as you type. Similarly, if you use the "text" input type for an email field, the browser's default email pattern check will not be triggered.
When you use the correct input type, the password field will obscure the characters being typed, which is the desired behavior. Additionally, if you type an incorrect email address in the email field, the browser will notify you with a pop-up because of the built-in validation it provides.
Use the Correct HTML Input Types
- Email should use
type="email". - Password should use
type="password". - Confirm Password should also use
type="password".
To ensure that the username field contains valid data, mark it as "required." If the user tries to submit the form without filling in this field, the browser will prompt them to complete it. You can also restrict the number of characters by using the minlength attribute.
Built-in HTML Validators
- For Username, mark it as "required." If empty upon submission, the browser will ask:
"Please fill out this field." - Use
minlength="5"to require a minimum of five characters.
- For instance, to require a number in the username, use the pattern attribute:
pattern="^[0-9]+$". - If a string is entered instead of a number, an HTML tooltip will appear, prompting: "Please match the requested format."
- Use the
titleattribute to display custom tooltips. For example, on the username field, settitle="Username must be at least 5 characters and include a number."
reportValidity()is a method available on form elements (<form>,<input>,<select>,<textarea>, etc.) that triggers the browser's built-in form validation.setCustomValidity(message)is a method on input elements that lets you set a custom validation message, overriding the browser’s default message for specific constraints.
- Wait until the user moves to the next input or loses focus on the current input before validating. Replace the
onInputevent handler withonChangefor this purpose.
- Suppose validation accepts both letters and numbers and requires a minimum of 8 characters. If the user enters "james," they’ll get an error saying a number is also needed. If they type "james12" but it's too short, they’ll get an error saying it should be a minimum of 8 characters. Show errors when the user moves to the next field.
- Error messages can shift the UI layout, which may look unappealing. Set a fixed height for error messages to prevent this shifting and maintain the form's appearance.
- Use a red color, danger icon, or tooltip for errors if it fits your UI guidelines. Ensure the tooltip is accessible for screen readers.
- Highlight the input field with a red border when there’s an error.
- Clear error messages as soon as the user meets the required conditions.
- How do you know if a field is required? A visual clue, right?
- The red asterisk (*) is one of the most common visual patterns used to indicate that a field is required.
- It allows users to quickly identify mandatory fields, reducing trial and error and speeding up form completion.
- Frontend validation can be bypassed if someone tampers with the form or submits it via Postman. Server-side validation is crucial for security.
- Adding validation to improve a form's usability is only half the challenge. The other half is ensuring the form is accessible, meaning that individuals with disabilities can understand whether a field is invalid and know how to correct it.
- Accessibility ensures everyone can access the content, while usability focuses on how easy it is to use the website. Together, they create the best possible user experience.
- From an accessibility perspective, we must ensure that everyone not only knows the field is invalid but also understands the error message.