react-mui-form-validator

Validation component for material-ui forms

Installation

npm install react-mui-form-validator

Info

Some rules can accept extra parameter, example:

TextField

<MuiTextField
  {...someProps}
  validators={[
    {
      validator: "maxNumber",
      max: 10,
    },
  ]}
/>

Usage Example

You can pass any props of field components, but note that errorText prop will be replaced when validation errors occurred. Your component must provide a theme.

import { useState } from "react";
import { MuiForm, MuiTextField } from "react-mui-form-validator";
import { Button } from "@mui/material";

export default function App(props: any) {
  const [email, setEmail] = useState();

  const handleSubmit = () => {
    // your submit logic
  };

  return (
    <div>
      <h3>Example Sign In</h3>
      <MuiForm
        onSubmit={handleSubmit}
        onError={(errors: any) => console.log(errors)}
      >
        <MuiTextField
          name="email"
          label="Email"
          placeholder="[e-mail]"
          onChange={(v) => setEmail(v.target.value)}
          value={email}
          validators={[{ validator: "required" }, { validator: "isEmail" }]}
          errorMessages={["Email required", "Enter a valid email"]}
          fullWidth
        />
        <br />
        <Button type="submit" variant="outlined">
          Sign In
        </Button>
      </MuiForm>
    </div>
  );
}