Simple form Validation Rules - salimakhtar92/ReactJs GitHub Wiki

import React, {useState} from "react";
import "./styles.css";

export default function App() {
  const [names, setName] = useState({});

  const validationRule = [
    {
      field: 'fname',
      method: (value) => !Boolean(value),
      message: 'Enter first name.',
      valiWhen: false
    },
    {
      field: 'fname',
      method: (value) => value && value.length > 4 ,
      message: 'Fname should be atleast 5 char.',
      valiWhen: true
    },
    {
      field: 'mname',
      method: (value) => !Boolean(value),
      message: 'Enter middle name.',
      valiWhen: false
    },
    {
      field: 'lname',
      method: (value) => !Boolean(value),
      message: 'Enter last name.',
      valiWhen: false
    }
  ];
  const handleChange = event => {
    const {name, value} = event.target;
    const namesObj = {...names};
    namesObj[name] = value;
    setName(namesObj);
  };

  const validateForm = () => {
    let validation = valid(validationRule);
    validationRule.forEach(rule => {
      if(!validation[rule.field].isInvalid) {
        const fieldValue = names[rule.field];
        const validationMethod = rule.method;
        if(validationMethod(fieldValue) !== rule.valiWhen) {
          validation = inValid(validation, rule);
        }
      }
    });
    console.log(validation);
    return validation;
  };

  const inValid = (validation, rule) => {
    validation[rule.field] = {isInvalid: true, message: rule.message};
    validation.isValid = false;
    return validation;
  };

  const valid = (rules) => {
    const validation = {};
    rules.forEach(rule => {
      validation[rule.field] = {isInvalid: false, message: ''};
    });
    return {isValid: true, ...validation};
  };

  const handleSubmit = () => {
    const validation = validateForm();
    if(validation.isValid) {
      console.log('Form validated');
    } else {
      console.log('In-valid form data');
    }
  };
  console.log(names);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input name='fname' onChange={handleChange} />
      <input name='mname' onChange={handleChange} />
      <input name='lname' onChange={handleChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}