1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
import React, { Component } from 'react'; import { Button, Form, FormGroup, Label, Input, Fade } from 'reactstrap'; import _ from 'lodash'; const validationMethods = { required : (field, value) => { if (!value.toString().trim().length) { return `This ${field} field is required.` } }, isEmail: (field,value) => { var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; if (reg.test(value) === false) { return `Invalid Email Address.` } } } const validateForm = (form) => { const loginForm = document.getElementById(form) return loginForm.querySelectorAll('[validations]'); } const runValidationRules = (element, errors) => { const target = element; const field = target.name; const value = target.value let validations = element.getAttribute('validations'); validations = validations.split(',') for (let validation of validations) { validation = validation.split(':'); const rule = validation[0]; const error = validationMethods[rule](field, value); errors[field] = errors[field] || {}; if(error) { errors[field][rule] = error; } else { if(_.isEmpty(errors[field])) { delete errors[field]; } else { delete errors[field][rule]; } } } return errors; } export default class Login extends Component { constructor(props) { super(props); this.state = { email: '', password: '', errors: [] } } login = (event) => { event.preventDefault(); const formElements = validateForm("loginForm"); formElements.forEach(element=> { const errors = runValidationRules(element, this.state.errors); this.setState({ errors: errors }); }) const email = this.state.email; const password = this.state.password; const errors = this.state.errors; console.log(email, password, errors); } handleChange = (event) => { const target = event.target; const field = target.name; const value = target.value const errors = runValidationRules(target, this.state.errors); this.setState({ errors: errors }); this.setState({ [field]: value }); } render() { return ( <div className="container"> <Form id="loginForm" method="post" onSubmit={this.login}> <FormGroup> <Label for="email">Email</Label> <Input type="text" validations={['required','isEmail']} name="email" value={this.state.email} onChange={this.handleChange} id="email" placeholder="Enter your email address." /> <FromValidationError field={this.state.errors.email} /> </FormGroup> <FormGroup> <Label for="password">Password</Label> <Input type="password" validations={['required']} name="password" value={this.state.password} onChange={this.handleChange} id="password" placeholder="Enter your password." /> <FromValidationError field={this.state.errors.password} /> </FormGroup> <Button>login</Button> </Form> </div> ); } } const FromValidationError = props => ( <Fade in={Boolean(props.field)} tag="p" className="error"> { props.field ? Object.values(props.field).shift() : '' } </Fade> ); |