React Suite Components Form validation Input

React Suite is a collection of beautiful and customizable components for ReactJS that makes building user interfaces easier. One essential component is the Input. It handles form validation and user input smoothly, showing helpful error messages. This makes it perfect for creating strong and user-friendly web apps.

Form validation input

The Input component in React Suite is a flexible form input that can be used as a regular text input or as a textarea. It can be easily customized using attributes like placeholder, size, and validation. You can also trigger actions and show tooltips. It’s a user-friendly way to handle user input in React applications.

Syntax:

import { Input } from 'rsuite';
const InputForm = () => (
  <>
    <Input placeholder="Input" />
  </>
);

Steps to create the application and install required modules:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install rsuite

Step 4: Import Required Styles in the `App.js` file in the `src` folder.

import "rsuite/dist/rsuite.min.css";

Step 5: Define the required Validation Schema and States

Step 6: Write desired code for your application.

Step 7: Run the application.

npm start

Note: Your application is now running on the`http://localhost:3000/`

Example 1: Simple Submit Form default input validation

Javascript

import { Form, Button, Schema } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
    const nameRule =
        Schema.Types.StringType().isRequired(
            "This field is required."
    );

    const emailRule = Schema.Types.StringType().isEmail(
        "Please enter a valid email address."
    );

    return (
        <Form>
            <Form.Group controlId="name">
                <Form.ControlLabel>
                    Username
                </Form.ControlLabel>
                <Form.Control name="name" rule={nameRule} />
            </Form.Group>
            <Form.Group controlId="email">
                <Form.ControlLabel>Email</Form.ControlLabel>
                <Form.Control
                    name="email"
                    rule={emailRule}
                />
            </Form.Group>
            <Button appearance="primary" type="submit">
                Submit
            </Button>
        </Form>
    );
}

export default App;

Output: The above example, Showcases a simple submit form with two input fields: `Username` and `Email`. In this example we have used React Suite’s components: `Form`, `Button` and `Form.Control` with custom validation rules (nameRule and emailRule) using `Schema.Types.StringType()`.

Example 2: Simple Login Form Input with custom validations

Javascript

import React, { useState } from "react";
import {
    Form,
    Button,
    ButtonToolbar,
    Schema,
    InputGroup,
} from "rsuite";
import EyeIcon from "@rsuite/icons/legacy/Eye";
import EyeSlashIcon from "@rsuite/icons/legacy/EyeSlash";

import "rsuite/dist/rsuite.min.css";
import "./App.css";

function App() {
    const { StringType } = Schema.Types;
    const model = Schema.Model({
        password: StringType().isRequired(
            "This field is required."
        ),
        email: StringType()
            .isEmail("Please enter a valid email address.")
            .isRequired("This field is required."),
    });
    const [visible, setVisible] = useState(false);
    const handleChange = () => {
        setVisible(!visible);
    };
    return (
        <>
            <Form model={model}>
                <Form.Group controlId="email">
                    <Form.ControlLabel>
                        Email
                    </Form.ControlLabel>
                    <Form.Control
                        name="email"
                        type="email"
                    />
                </Form.Group>
                <Form.Group controlId="password">
                    <Form.ControlLabel>
                        Password
                    </Form.ControlLabel>
                    <InputGroup>
                        <Form.Control
                            name="password"
                            type={
                                visible === false
                                    ? "password"
                                    : "text"
                            }
                        />
                        <InputGroup.Addon
                            onClick={handleChange}
                        >
                            {visible ? (
                                <EyeIcon />
                            ) : (
                                <EyeSlashIcon />
                            )}
                        </InputGroup.Addon>
                    </InputGroup>
                </Form.Group>
                <ButtonToolbar>
                    <Button
                        appearance="primary"
                        type="submit"
                    >
                        Login
                    </Button>
                </ButtonToolbar>
            </Form>
        </>
    );
}

export default App;

Output: This example demonstrates a login form with an email and password input fields. The password input field also includes a toggle button to show/hide the password using the visible state. The custom validation rules are defined using Schema.Types.StringType().Output

Reference: https://rsuitejs.com/components/form-validation/#form-validation