DEV Community

Cover image for Unlock React Form Validation with Trivule: The Game-Changing Approach
Claude Fassinou
Claude Fassinou

Posted on

Unlock React Form Validation with Trivule: The Game-Changing Approach

If you love the simplicity of React, you'll adore Trivule. This solution allows you to validate your forms easily and effectively. In this article, we will validate a form with two fields: email and message, to show how user-friendly and straightforward it is to use Trivule.

Example of output

Image description
Extract from

Creating the Project

To start, create a project with Vite:

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

Follow the instructions to complete the setup. I chose the TypeScript option, but you can choose whichever suits you best.

Then, install Trivule:

npm install trivule
Enter fullscreen mode Exit fullscreen mode

Validation Rules

  • Email: required, maximum 63 characters, must be a Gmail address.
  • Message: required, maximum 250 characters, must start with "Hello".

Creating the React Component

Create a file form.tsx in your React working directory:

import React, { useEffect, SyntheticEvent } from "react";
import { TrivuleForm } from "trivule";

// Callback to define validation rules
const bindRules = (trivuleForm: TrivuleForm) => {
  trivuleForm.make({
    email: {
      rules: "required|email|endWith:@gmail.com|max:63",
      messages: {
        endWith: "Only Gmail addresses are allowed",
      },
    },
    message: {
      rules: "required|startWith:Hello|max:250",
    },
  });
};

// React Component
function Form() {
  const trivuleForm = new TrivuleForm({ invalidClass: "is-invalid" });
  trivuleForm.afterBinding(bindRules);

  useEffect(() => {
    // The code runs once the form is found in the DOM
    trivuleForm.bind("#myForm");
  }, []);

  const handleSubmit = (e: SyntheticEvent) => {
    if (!trivuleForm.passes()) {
      e.preventDefault();
      return;
    }
    const data = trivuleForm.validated();
    console.log(data);
  };

  return (
    <form id="myForm" onSubmit={handleSubmit}>
      <h3>Trivule + React-vite</h3>
      <div className="form-group">
        <input type="text" name="email" />
        <div className="alert alert-danger" role="alert">
          <div data-tr-feedback="email"></div>
        </div>
      </div>
      <div className="form-group">
        <textarea name="message"></textarea>
        <div className="alert alert-danger" role="alert">
          <div data-tr-feedback="message"></div>
        </div>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;
Enter fullscreen mode Exit fullscreen mode

Integrating into the Application

Import and use the Form component in App.tsx:

import React from "react";
import "./App.css";
import Form from "./form";

function App() {
  return <Form />;
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Styling Flexibility

Trivule is agnostic about the styling of your form. It provides an API that allows you to apply your own styles based on the validation status. You can define classes to indicate valid or invalid states, and Trivule will handle the rest.

Learn More

To further your knowledge of Trivule, check out the following resources:

You can also create a TrivuleForm component, export it, and validate your forms without manual initialization. Check out an example on GitHub.

Top comments (4)

Collapse
 
getsetgopi profile image
GP

Sorry! I prefer react-hook-form anytime. Fantastic documentation, good community support, easy to learn, easy to set up and easy to code and implement.

Collapse
 
claudye profile image
Claude Fassinou

We'd be interested to hear what you don't like about Trivule so we can improve it. Trivule is still in its early stages, and contributions from users like you can help us make it even better and faster for developers.

Thank you for your feedback

Collapse
 
claudye profile image
Claude Fassinou

Thank you for your feedback. Trivule is designed to be used across any framework in a consistent manner. It is not for react. It supports all validation scenarios, including translation and various validation scenarios.

Collapse
 
natucode profile image
natucode

Good ! very simple