react-material-form

react-material-form is a set of react components, for validating forms using material-ui for react.

Install

npm install react-material-form --save

Available validation rules

required, email, letters, number

Usage

Check code available on Github or the code snippet bellow

import React from "react";
import {MyForm, MyTextField, MySelectField} from "react-material-form";
import RaisedButton from "material-ui/RaisedButton";
 
const isEmptyObject = (obj) =>  {
    for(let prop in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, prop)) {
            return false;
        }
    }
    return true;
};
 
class Login extends React.Component {
 
    constructor (props) {
        super (props);
 
        this.state = {
            errors: {},
            formData: {}
        };
 
        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
    }
 
    onSubmit () {
        const {errors, formData} = this.state;
 
        const isValidForm = isEmptyObject(errors);
 
        if (!isValidForm) {
            return false;
        }
 
        // Handle submit
        console.log(formData);
    }
 
    onChange (data) {
        this.setState(data);
    }
 
    render () {
        return (
            <FormElement onSubmit={this.onSubmit} onChange={this.onChange}>
                <div>
                    <MyTextField
                        email
                        id="email"
                        name="email"
                        hintText="Email"
                        fullWidth={true}
                    />
                </div>
 
                <div>
                    <MyTextField
                        required
                        type="password"
                        id="password"
                        name="password"
                        hintText="Password"
                        fullWidth={true}
                    />
                </div>
 
                <div>
                    <MySelectField
                        required
                        name="gender"
                        floatingLabelText="Select your gender"
                        options={[{label: "Male", value: "male"}, {label: "Female", value: "female"}]}
                    />
                </div>
 
                <div>
                    <RaisedButton type="submit" label="Submit" primary={true} disabled={!isEmptyObject(this.state.errors)}/>
                </div>
            </FormElement>
        );
    }
 
}
 
export default Login;