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 (); } } const FromValidationError = props => ({ props.field ? Object.values(props.field).shift() : '' } );
Subscribe
Login
0 Comments
Most Voted