react-mui-simple-form-validation v0.0.11

react-mui-simple-form-validation

Installation

yarn add react-mui-simple-form-validation

npm install  react-mui-simple-form-validation

Usage

Simple Login Page

Create LoginFormFields.component.js

import React, { useState } from 'react';
import Grid from '@material-ui/core/Grid';
import { makeStyles } from "@material-ui/core/styles";
import {
	withFormValidation,
	InputWithValid,
} from 'react-mui-simple-form-validation';


const useStyles = makeStyles(theme => ({
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 400
  }
}));

let LoginFormFields = (props) => {
  const { fields } = props;
  const classes = useStyles();
  return (
    <>
      <Grid item xs={12}>
        <InputWithValid
          classTextField={classes.textField}
          name="name"
          label="Name"
          value={fields.name}
          inputProps={{ pattern: '.{3,40}' }} // can use this prop or 'regexp' prop
          errorText="From 3 to 40 chapters"
          required={true}
          {...props}
        />
      </Grid>
      <Grid item xs={12}>
        <InputWithValid
            classTextField={classes.textField}
            name="email"
            label="Email"
            regexp='[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$' // can use this prop or 'inputProps={{ pattern: '.{3,40}' }}' prop
            value={fields.email}
            errorText="Example: characters@characters.domain "
            required
            {...props}
          />
      </Grid>
    </>  
  )
}
const LoginFormWithValid = withFormValidation(LoginFormFields);

export default LoginFormWithValid;

Then create LoginForm.component.js

import LoginFormWithValid from './path/to/LoginFormWithValid';

let initialUser = {
  name: '',
  email: ''
};

const LoginForm = () => {
  const [user, setUser] =  useState(initialUser);

  const onChange = (e) => {
    const { name } = e.target;
    let { value } = e.target;
    if (!Array.isArray(value) && value.trim() === '') {
      value = '';
    }
    setUser({...user,[name]: value});
  }

  const onSubmit = (e) => {
    e.preventDefault();
    setUser(initialUser);
    console.log('Submit');
  }

  return (
    <Grid container alignItems='center'>
      <LoginFormWithValid
        fields={user}
        onChange={onChange}
        onSubmit={onSubmit}
        submitBtn={{ value: 'Login' }}
        btnsGridContainer={{alignItems: 'center'}}
        btnGridItem={{xs: 12}}
      />
    </Grid>
  )
}
export default LoginForm;

That's all!

You can also use MultipleChipSelectWithValid component

import { MultipleChipSelectWithValid } from 'react-mui-simple-form-validation';

const InputTitle = () => (
	<MultipleChipSelectWithValid
		name="categories"
		label="Categories"
		fullWidth
		selectValues={categories}
		value={fields.categories}
		required
		{...props}
	/>
)

MultipleChipSelectWithValid use Select, FormControl, InputLabel, Input, MenuItem, Chip components;

Supported Props for withFormValidation

Component has a structure :

<form>
	<BaseComponent></BaseComponent>
	<Grid container> <!--btnsGridContainer -->
		<Grid item> <!--btnGridItem -->
			<Button /> <!--submitBtn -->
		</Grid>
		{children}  <!--here you can add extra buttons -->
	</Grid>
</form>

Supported Props for InputWithValid

Supported Props for MultipleChipSelectWithValid

Enjoy! :=)

License

MIT