{"_id":"@activelylearn/react-material-ui-form-validator","_rev":"2-b46d56ae86604862db80c96edf169f8a","name":"@activelylearn/react-material-ui-form-validator","description":"Simple validator for forms designed with material-ui components.","dist-tags":{"latest":"1.0.0-beta.4"},"versions":{"1.0.0-beta.4":{"name":"@activelylearn/react-material-ui-form-validator","version":"1.0.0-beta.4","description":"Simple validator for forms designed with material-ui components.","main":"./lib/index.js","scripts":{"build":"babel ./src -d ./lib --presets=es2015,react,stage-2","prepublish":"npm run build","lint":"eslint src/**"},"repository":{"type":"git","url":"git+https://github.com/NewOldMax/react-material-ui-form-validator.git"},"keywords":["material-ui","form","validation"],"author":{"name":"NewOldMax"},"license":"MIT","bugs":{"url":"https://github.com/NewOldMax/react-material-ui-form-validator/issues"},"homepage":"https://github.com/NewOldMax/react-material-ui-form-validator#readme","peerDependencies":{"material-ui":"next","react":"^15.0.0","react-dom":"^15.0.0","prop-types":"^15.0.0"},"devDependencies":{"babelify":"7.3.0","browser-sync":"2.17.5","browserify":"13.1.0","nodemon":"1.11.0","rework":"1.0.1","rework-npm":"1.0.0","rework-npm-cli":"0.1.1","serve":"1.4.0","uglify-js":"2.7.3","watchify":"3.7.0","bufferutil":"1.2.1","utf-8-validate":"1.2.1","babel-preset-react":"6.16.0","babel-preset-es2015":"6.16.0","babel-preset-stage-2":"6.16.0","envify":"3.4.1","babel-eslint":"^7.1.1","eslint":"^3.11.1","eslint-config-airbnb":"^13.0.0","eslint-plugin-import":"^2.2.0","eslint-plugin-jsx-a11y":"2.2.3","eslint-plugin-react":"^6.8.0","babel-cli":"^6.3.17","babel-core":"^6.5.1","babel-loader":"^6.2.2","babel-polyfill":"^6.5.0"},"gitHead":"e737e99255bc8e6ca19256d8081f9b6b7d121ae0","_id":"@activelylearn/react-material-ui-form-validator@1.0.0-beta.4","_shasum":"6b7be3e0854abb026d53f2dc96db401c46393377","_from":".","_npmVersion":"3.10.9","_nodeVersion":"6.9.4","_npmUser":{"name":"admehta01","email":"admehta01@gmail.com"},"dist":{"shasum":"6b7be3e0854abb026d53f2dc96db401c46393377","tarball":"https://registry.npmjs.org/@activelylearn/react-material-ui-form-validator/-/react-material-ui-form-validator-1.0.0-beta.4.tgz","integrity":"sha512-uulLUr98obERLS9b3LI9uZnNjjpolVqnQj2VqOJcfv6/xl15S83Uxi+uYEBhdBHcCwO5DD5QXiw9adq7ECSXmg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyd8JM1uoxzMTDxF0I5LFZFDKKbfHLYf8TPsy7I+iVxAIgLJFbRc/KcBYWjWTYlbCMwoUTXscWP//gS9JEaTnzMww="}]},"maintainers":[{"name":"admehta01","email":"admehta01@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-material-ui-form-validator-1.0.0-beta.4.tgz_1505430377821_0.9160472194198519"}}},"readme":"## Validation component for material-ui forms\r\n\r\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)\r\n[![npm version](https://badge.fury.io/js/react-material-ui-form-validator.svg)](https://badge.fury.io/js/react-material-ui-form-validator)\r\n[![Build Status](https://travis-ci.org/NewOldMax/react-material-ui-form-validator.svg?branch=master)](https://travis-ci.org/NewOldMax/react-material-ui-form-validator)\r\n\r\n### [Demo](https://newoldmax.github.io/react-material-ui-form-validator/)\r\n\r\n### Versions\r\n+ 0.x - supports material-ui <= 0.x\r\n+ 1.x - supports material-ui >= 1.x (experimental support, you can install it by ``npm i react-material-ui-form-validator@next``)\r\n\r\nSimple form validation component for material-ui library inspired by [formsy-react](https://github.com/christianalfoni/formsy-react)\r\n\r\nSupported types:\r\n+ Text ([TextValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/TextValidator.jsx))\r\n+ Select ([SelectValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/SelectValidator.jsx))\r\n+ AutoComplete ([AutoCompleteValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/AutoCompleteValidator.jsx))\r\n+ Date ([DateValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/DateValidator.jsx))\r\n+ Time ([TimeValidator](https://github.com/NewOldMax/react-material-ui-form-validator/blob/master/src/TimeValidator.jsx))\r\n\r\nDefault validation rules:\r\n+ matchRegexp\r\n+ isEmail\r\n+ isEmpty\r\n+ required\r\n+ trim\r\n+ isNumber\r\n+ isFloat\r\n+ isPositive\r\n+ minNumber\r\n+ maxNumber\r\n\r\nSome rules can accept extra parameter, example:\r\n````javascript\r\n<TextValidator\r\n   {...someProps}\r\n   validators={['minNumber:0', 'maxNumber:255', 'matchRegexp:^[0-9]$']}\r\n/>\r\n````\r\n\r\n\r\n### Example\r\n\r\n<img src=\"https://raw.githubusercontent.com/NewOldMax/react-material-ui-form-validator/master/examples/example.gif\" width=\"285\">\r\n\r\n### Usage\r\n\r\nYou can pass any props of field components, but note that ``errorText`` prop will be replaced when validation errors occurred.\r\nYour component must [provide a theme](http://www.material-ui.com/#/get-started/usage).\r\n\r\n````javascript\r\n\r\nimport React from 'react';\r\nimport RaisedButton from 'material-ui/RaisedButton';\r\nimport { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';\r\n\r\nclass MyForm extends React.Component {\r\n\r\n    constructor(props) {\r\n        super(props);\r\n\r\n        this.handleChange = this.handleChange.bind(this);\r\n    }\r\n\r\n    handleChange(event) {\r\n        const email = event.target.value;\r\n        this.setState({ email });\r\n    }\r\n\r\n    handleSubmit() {\r\n        // your submit logic\r\n    }\r\n\r\n    render() {\r\n        const { email } = this.state;\r\n        return (\r\n            <ValidatorForm\r\n                ref=\"form\"\r\n                onSubmit={this.handleSubmit}\r\n                onError={errors => console.log(errors)}\r\n            >\r\n                <TextValidator\r\n                    floatingLabelText=\"Email\"\r\n                    onChange={this.handleChange}\r\n                    name=\"email\"\r\n                    value={email}\r\n                    validators={['required', 'isEmail']}\r\n                    errorMessages={['this field is required', 'email is not valid']}\r\n                />\r\n                <RaisedButton type=\"submit\" />\r\n            </ValidatorForm>\r\n        );\r\n    }\r\n}\r\n\r\n````\r\n\r\nYou can add your custom rules:\r\n````javascript\r\n\r\nimport React from 'react';\r\nimport RaisedButton from 'material-ui/RaisedButton';\r\nimport { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';\r\n\r\nclass ResetPasswordForm extends React.Component {\r\n\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            user: {},\r\n        };\r\n        this.handleChange = this.handleChange.bind(this);\r\n    }\r\n\r\n    componentWillMount() {\r\n        // custom rule will have name 'isPasswordMatch'\r\n        ValidatorForm.addValidationRule('isPasswordMatch', (value) => {\r\n            if (value !== this.state.user.password) {\r\n                return false;\r\n            }\r\n            return true;\r\n        });\r\n    }\r\n\r\n    handleChange(event) {\r\n        const { user } = this.state;\r\n        user[event.target.name] = event.target.value;\r\n        this.setState({ user });\r\n    }\r\n\r\n    handleSubmit() {\r\n        // your submit logic\r\n    }\r\n\r\n    render() {\r\n        const { user } = this.state;\r\n\r\n        return (\r\n            <ValidatorForm\r\n                onSubmit={this.handleSubmit}\r\n            >\r\n                <TextValidator\r\n                    floatingLabelText=\"Password\"\r\n                    onChange={this.handleChange}\r\n                    name=\"password\"\r\n                    type=\"password\"\r\n                    validators={['required']}\r\n                    errorMessages={['this field is required']}\r\n                    value={user.password}\r\n                />\r\n                <TextValidator\r\n                    floatingLabelText=\"Repeat password\"\r\n                    onChange={this.handleChange}\r\n                    name=\"repeatPassword\"\r\n                    type=\"password\"\r\n                    validators={['isPasswordMatch', 'required']}\r\n                    errorMessages={['password mismatch', 'this field is required']}\r\n                    value={user.repeatPassword}\r\n                />\r\n                <RaisedButton type=\"submit\" />\r\n            </ValidatorForm>\r\n        );\r\n    }\r\n\r\n````\r\n\r\nCurrently material-ui [doesn't support](https://github.com/callemall/material-ui/issues/3771) error messages for switches, but you can easily add your own:\r\n````javascript\r\nimport React from 'react';\r\nimport { red300 } from 'material-ui/styles/colors';\r\nimport Checkbox from 'material-ui/Checkbox';\r\nimport { ValidatorComponent } from 'react-material-ui-form-validator';\r\n\r\nclass CheckboxValidatorElement extends ValidatorComponent {\r\n\r\n    render() {\r\n        const { errorMessages, validators, requiredError, value, ...rest } = this.props;\r\n\r\n        return (\r\n            <div>\r\n                <Checkbox\r\n                    {...rest}\r\n                    ref={(r) => { this.input = r; }}\r\n                />\r\n                {this.errorText()}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    errorText() {\r\n        const { isValid } = this.state;\r\n\r\n        if (isValid) {\r\n            return null;\r\n        }\r\n\r\n        const style = {\r\n            right: 0,\r\n            fontSize: '12px',\r\n            color: red300,\r\n            position: 'absolute',\r\n            marginTop: '-25px',\r\n        };\r\n\r\n        return (\r\n            <div style={style}>\r\n                {this.getErrorMessage()}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n\r\nexport default CheckboxValidatorElement;\r\n````\r\n````javascript\r\n    componentWillMount() {\r\n        ValidatorForm.addValidationRule('isTruthy', value => value);\r\n    }\r\n...\r\n    <CheckboxValidatorElement\r\n        ...\r\n        validators=['isTruthy']\r\n        errorMessages=['this field is required']\r\n        checked={value}\r\n        value={value} <---- you must provide this prop, it will be used only for validation\r\n    />\r\n````\r\n\r\n##### [Advanced usage](https://github.com/NewOldMax/react-material-ui-form-validator/wiki)\r\n\r\n### API\r\n\r\n#### ValidatorForm\r\n\r\n| Prop            | Required | Type     | Default value | Description                                                                                                                  |\r\n|-----------------|----------|----------|---------------|------------------------------------------------------------------------------------------------------------------------------|\r\n| onSubmit        | true     | function |               | Callback for form that fires when all validations are passed                                                                 |\r\n| instantValidate | false    | bool     | true          | If true, form will be validated after each field change. If false, form will be validated only after clicking submit button. |\r\n| onError         | false    | function |               | Callback for form that fires when some of validations are not passed. It will return array of elements which not valid. |\r\n\r\n#### All validated fields (ValidatorComponent)\r\n\r\n| Prop            | Required | Type     | Default value | Description                                                                            |\r\n|-----------------|----------|----------|---------------|----------------------------------------------------------------------------------------|\r\n| validators      | false    | array    |               | Array of validators. See list of default validators above.                             |\r\n| errorMessages   | false    | array    |               | Array of error messages. Order of messages should be the same as `validators` prop.    |\r\n| name            | true     | string   |               | Name of input                                                                          |\r\n| validatorListener | false  | function |               | It triggers after each validation. It will return `true` or `false`                    |\r\n\r\n\r\n### Contributing\r\n\r\nThis component covers all my needs, but feel free to contribute.","maintainers":[{"name":"admehta01","email":"admehta01@gmail.com"},{"name":"setvik","email":"stein.setvik@gmail.com"}],"time":{"modified":"2022-06-12T14:16:20.539Z","created":"2017-09-14T23:06:17.926Z","1.0.0-beta.4":"2017-09-14T23:06:17.926Z"},"homepage":"https://github.com/NewOldMax/react-material-ui-form-validator#readme","keywords":["material-ui","form","validation"],"repository":{"type":"git","url":"git+https://github.com/NewOldMax/react-material-ui-form-validator.git"},"author":{"name":"NewOldMax"},"bugs":{"url":"https://github.com/NewOldMax/react-material-ui-form-validator/issues"},"license":"MIT","readmeFilename":"Readme.md"}