Light

awran5 / react-material-ui-step-form Goto Github PK

View Code? Open in Web Editor NEW

24.0 2.0 22.0 1.79 MB

React Material UI multi steps form with basic form validation logic.

Home Page: https://react-material-ui-step-form.vercel.app/

License: MIT License

HTML 6.67% JavaScript 5.12% TypeScript 88.22%

react-form material-ui-form steps form-validation-react reactjs material-ui react react-hooks

react-material-ui-step-form's Introduction

React Material-UI Step Form

React Material UI multi step form with basic form onChange validation logic. inspired by Traversy Media tutorial and using Material-ui checkout free template.

Instructions

Download or clone the repo:

git clone https://github.com/awran5/react-material-ui-step-form.git

Dependencies

Material-UI v5 or higher
React version supports Hooks

// src/Context.tsx
const variant = 'standard' // `filled` | `outlined` | `standard`
const margin = 'normal' // `dense` | `none` | `normal`

Example

type ValidationSchema = Record<
  string,
  {
    value?: any
    error?: string
    required?: boolean
    validate?: 'text' | 'number' | 'email' | 'phone' | 'zip' | 'checkbox' | 'select'
    minLength?: number
    maxLength?: number
    helperText?: string
  }
>


// src/initialValues.tsx
const initialValues: ValidationSchema = {
  yourFieldname: {
    value: '',                          // will be filled with field value
    error: '',                          // will be filled with error message
    required: true,                     // if `false` field will be still validated but will not enable the `next` button
    validate: 'text',                   // field validation logic (see types above)
    minLength: 2,                       // validate min length
    maxLength: 20,                      // validate max length
    helperText: 'custom error message'  // change the default error message (applied to `validate` types only)
  },
  {
    // another field
  }
}

Changelog - 10/2021

Update: MUI v5
fix: minor bugs
style: cleaning up

Changelog - 07/2021

Refactor: code to Typescript
Refactor: Validation logic, now you can control all validaton logic inside src/initialValues.tsx file
Update: app dependencies
Add: React Context provides to manage Components state
Add: Option to change all fields variant and margin that applied to TextField
Add: eslint with airbnb style
Add: Checkbox field
Add: Required field logic

Live Demo

react-material-ui-step-form's People

Contributors

Stargazers

Watchers

react-material-ui-step-form's Issues

Older js version causes issue

Thankfully you provided a link to a sandbox with the older js-code.
(https://codesandbox.io/s/react-material-ui-step-form-forked-578lz)
I had trouble implemented the new typescript in my jsx project.

However the js version was a a bit older and for some reason the parameter color="default" in the back buttons of the SecondStep.js and Confirm.js is causing an weird error message:
"the above error occurred in the component"
without stating any above error.
Commenting this line out made it work in react 18.

Handling File Input

Thanks for this sir.

The handleChange cannot fire the form target, so when i select a file and try to go back, it cannot retain the state of the form and it throws error:

Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

<TextField
            fullWidth
            variant="outlined"
            size="small"
            type="file"
            name="memoradum_ArticlesOfAssociation"
            label="Memoradum Articles Of Association"
            value={memoradum_ArticlesOfAssociation || ""}
            onChange={(e) => {
              // handleFormHere
            }}
            required
          />

Input Field Validations Error

The validation is not working properly. Example: email field is showing error but we do get access to the NEXT button.

parsing error

running the code comes up with a parsing error in:
src/context.txt
line 14:8
"expected '{'"
and then after launching the app, the page in unable to interact

Not working gives an error

Hi,

First of all.. Thanks a lot for this example..

But when I cloned your repository, it didn't work..
Downloading source code from https://codesandbox.io/s/react-material-ui-step-form-ui788 seems to have worked the issue.

If was giving some error related to PATH..

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.