import * as React from "react"; import "./style.css"; import isAlphabetical from "./alphabetical"; import isNumerical from "./numeric"; import * as errors from "./errors"; type PropType = { label: string; types?: ValidationTypes[]; }; type StateType = { invalid: boolean; error: string; }; export enum ValidationTypes { NumericalsOnly, AlphabetOnly } const initialState = { invalid: false, error: "" }; class FieldWithValidation extends React.Component { element: HTMLInputElement; constructor(props: PropType) { super(props); this.state = initialState; } validateFields(e: React.FormEvent) { const el = e.target as HTMLInputElement; const invalid = !el.validity.valid; let error = el.validationMessage; if (!invalid) { error = this.checkOther(el.value); } /* else if (el.validationMessage !== this.state.error) { this.throwError(el.validationMessage); } */ console.log("last error:", error); if (error) { this.throwError(error); } else if (!error && this.state.invalid) { console.log("went in to clear errors"); this.clearError(); } return true; } checkOther(value: any) { console.log("checking other"); const { types } = this.props; let error = ""; types.forEach(type => { switch (type) { case ValidationTypes.NumericalsOnly: error = !isNumerical(value) && errors.NumericalsOnly; break; case ValidationTypes.AlphabetOnly: error = !isAlphabetical(value) && errors.AlphabetOnly; } }); console.log("other error:", error); return error; } throwError(error: string) { this.setState({ error, invalid: true }); console.log("throwing error, set the stated"); return false; } clearError() { console.log("clearing error"); this.setState(initialState); } render() { const { label, ...props } = this.props; const { invalid } = this.state; return (
{ this.element = el; }} onBlur={e => { this.validateFields(e); }} /> {this.state.error}
); } } export default FieldWithValidation;