Form Validation

The form validation logic below only works for inputs that are placed within <lava-form> tags.

This page covers client-side validation, but it's critical to also validate input on the server side. This ensures security even if your endpoints are accessed directly.

Validation Convention

Streamlining form validation is straightforward with the guidelines outlined below. Leverage the native HTML5 validation attributes to augment your input fields. In the event of a validation error, we'll show the validation message you provide. The message you would like to display will be read from a span with the id of rfv-{control id}. Rest assured, utilizing the Lava shortcodes for form fields automates this process for you.If you don't provide a validation message then the default HTML/JavaScript message will be shown.

Validation Summary

By default, a summary of validation errors appears at the top of the form. To relocate this summary, insert the provided markup at your desired location within the form. Please note, the markup must be placed within the <lava-form> tags.<lava-validationsummary />

Validation Logic

The documentation below is not meant to be a full description of what is possible using the HTML validation API, but it provides the basic use cases for you. Note that if you use the Lava shortcodes these values will be provided for you. It's only when you are providing your own controls by calling the {[ rockcontrol ... ]} directly or by providing your own entire markup yourself that you need to worry about these fields.

HTML Validation Types

HTML5 introduced a range of input types that come with inherent validation logic, streamlining the process of ensuring that user-provided data conforms to expected formats or criteria. This feature enhances the user experience by providing immediate feedback on input errors, reducing the likelihood of incorrect data submission. Below is an explanation of how these input types incorporate built-in validation logic:

1. Email (type="email"): This input type automatically checks for a valid email format, ensuring the presence of characters typically found in email addresses, such as '@' and '.', and a domain structure. It does not, however, verify the existence of the email address.

2. URL (type="url"): Similar to the email type, the URL input type validates that the entered text conforms to the structure of a URL, including the protocol (http, https, etc.) and domain.

3. Number (type="number"): This type restricts input to numerical values. Additionally, it supports attributes like min, max, and step to further constrain the acceptable range and increments of the values.

4. Tel (type="tel"): While it doesn't enforce a specific format due to the wide variation in telephone number formats globally, this type is useful for semantic purposes and may trigger numeric keypads on mobile devices.

5. Date-related types (type="date", type="datetime-local", type="month", type="week", type="time"): These input types ensure that the user's input matches the expected date or time format. They often provide a user-friendly date/time picker interface, although the specific implementation can vary by browser and operating system.

Validation Attributes

Several attributes are at your disposal to establish validation criteria for input elements. The following offers a succinct overview of their implementation.

1. Required - The required field validator is a fundamental tool to ensure that certain input fields in a form must be filled out before the form can be submitted. This validator is critical for fields where input is essential, such as user names, passwords, email addresses, and any other data necessary for the form's purpose.

2. Min - The min Value validator ensures that the input provided by the user meets a specified minimum numerical value. This validation is crucial for situations where a certain threshold must be met, such as minimum age requirements, minimum order quantities, or any other scenario where input below a certain value is considered invalid.

3. Max - The maxValue validator is essential for ensuring that user-provided input does not exceed a specified maximum numerical value. This type of validation is particularly useful in contexts where there is an upper limit on acceptable values, such as maximum capacity, maximum allowed quantity, or maximum age limit.

4. MinLength - The minlength validator ensures that the textual input provided by the user in a form field meets or exceeds a specified minimum number of characters. This validation is crucial for fields where a certain amount of information is necessary for the input to be considered valid, such as passwords, personalized messages, or feedback.

5. MaxLength - The maxlength validator is designed to ensure that the textual input provided by the user does not exceed a specified maximum number of characters. This validator is essential for fields where there is a limit on the amount of text acceptable, such as usernames, comments, or any input where excessive length could be problematic.

6. Step - The step validator is used to ensure that numerical input or values of other input types like date, adhere to a specified step interval. This validator is particularly useful for fields where the input must be in multiples of a given value, such as quantity selections, time intervals, or any scenario where input needs to be constrained to a regular increment.

7. Pattern - The pattern validator is a powerful tool used to enforce specific formatting rules on text input fields within a form. It leverages regular expressions to define acceptable patterns, making it ideal for inputs requiring a particular structure, such as phone numbers, postal codes, email addresses, or custom user IDs. Below are some examples. We recommend using ChatGPT to help your create your own expressions.

   1. Zip Codes - Using the pattern of \d{5}(-\d{4})? to validate a US ZIP code, which can be either 5 digits or 5 digits followed by a dash and 4 more digits (e.g., 12345 or 12345-6789).

   2. Username - Use [a-zA-Z][a-zA-Z0-9_]{4,11} for a username that must start with a letter and can include letters, digits, underscores, and be 5 to 12 characters long.

   3. Password - Use (?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,} to enforce a custom password policy, such as at least 8 characters with at least one uppercase letter, one lowercase letter, and one digit.