Validation

HTML forms enable the collection and submission of user input on web pages. Form elements also support validation of those inputs through attributes like required and input types such as email or number to provide users with feedback.

Marigold's components seamlessly integrate with HTML forms, providing a developer-friendly solution for effective input data validation. It supports native attributes such as required and validation based on input types. Furthermore, Marigold's form elements enable the incorporation of custom validation functions, enhancing the browser's validation capabilities.

Built-in / Native Form Validation

The most straightforward way to validate user input is to use the built-in constraint validation. Marigold's form components work seamlessly with this API, allowing you to set constraints for each field. The browser will check these constraints on blur (user leaves the field) or when the form is submitted.

Marigold's form components utilize the same API as native HTML forms. Yet, the browser won't display error messages; instead, they will be styled to seamlessly blend with the overall design.

Here is an email subscription form. If you submit it without entering an email address or if the entered email address is invalid, an error will be displayed:

Custom Message

While browser-provided error messages are helpful, they might not be very descriptive. In such instances, you have the flexibility to override them by using a function with the errorMessages prop of the field. This allows you to display custom error messages tailored to better describe the occured error.

The example below customizes the default error messages for an unfilled required field. It's important to note that you only need to override the messages you want to; any unmodified aspects will fallback to the browser-provided messages.

Custom Validation

When the native validation options are insufficient or not ideal, it's also possible to entirely override them and implement a custom validation method by using the validate prop of a field. Ensure that the prop is assigned a function that returns one or more error messages. If there are multiple error messages, they should be provided as a string array.

The below example demonstrates a more sophisticated method for validating email addresses. The validation will always display the custom error messages. There is no separate message if the field is left empty.

Real-time Validation

By default, validation errors are shown to the user after the value is confirmed, for example, when they click away (on blur) or upon submitting the form. This prevents the user from being confused by irrelevant errors while they are still in the process of entering a value.

In specific situations though, choosing real-time validation proves beneficial, for example when enforcing certain password requirements. To enable real-time validation, control the field and configure the error and errorMessages props accordingly.

Here's an example where real-time validation is employed to check password requirements, immediately informing the user when a criteria is met.

Handling Server Errors

Server-side validation is essential alongside client-side validation to ensure robust and secure applications. While client-side validation offers immediate feedback and a smoother user experience, server-side validation is crucial for maintaining data integrity and security.

Marigold supports displaying server validation errors via the validationErrors prop on the <Form> component. The errors should be an object, where each field's nameis mapped to a string or array of strings representing error messages. The errors are immediately shown to the user upon setting the validationErrors and are cleared when the user modifies the field's value.

The subscription example now involves sending and receiving the provided email to and from the server. While most email subscriptions will be successful, attempting to use support@reservix.de serves as a negative example, triggering an error response from the server.

Third party libraries

Zod

Zod is a TypeScript-first schema declaration and validation library. The term "schema" to broadly refer to any data type, from a simple string to a complex nested object.

It's designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures.

In the following example you can see how a form with all its fields can be submitted. The submitted data will be displayed in an alert message.

For validating the form we are using zod. It is a library for building schemas, which can be used to validate inputs. It is especially useful when you have more complex validation rules.

react-hook-form

React Hook Form is a library for managing form state and validation in React applications using hooks. It allows you to create forms with minimal boilerplate and provides a simple and efficient way to handle form validation, submission, and error handling.

With React Hook Form, you can easily manage form state without the need for controlled components, making your code cleaner and more concise. It also offers performance benefits by reducing unnecessary re-renders.

For some examples have a look at Building Forms section.