MAKING SURE YOUR FORMS DON'T SUCK @damian 

No content

No content

No content

ACCURATE FASTER CONFIDENT SATISFIED https://alistapart.com/article/inline-validation-in-web-forms 

https://baymard.com/blog/inline-form-validation E-Commerce sites containing client side validation 40% 60% 

https://baymard.com/blog/inline-form-validation E-Commerce sites containing client side validation 12% 40% 48% 

THIS LEADS ME TO BELIEVE IT'S PURELY AN IMPLEMENTATION ISSUE 

No content

No content

No content

No content

WHY IS IT SO HARD TO DO RIGHT? 

BUILT TO BE UNRELIABLE 

BUILT TO COMPLEMENT SERVER SIDE VALIDATION 

ALIGN* AND SYNCHRONISE VALIDATIONS DECLARED ON THE SERVER 

RECONCILE SERVER GENERATED VALIDATIONS WITH THOSE ON THE CLIENT 

onKeypress - onChange - onBlur RECONCILE ERRORS MANIFESTED ACROSS DIFFERENT EVENT PHASES 

CONDITIONAL VALIDATIONS DEPENDANT ON OTHER FIELD VALUES 

ASYNCHRONOUS VALIDATION 

HOW DO WE FIX IT? 

JUST BEING AWARE THAT SERVER SIDE VALIDATIONS EXIST 

RECONCILE ERRORS MANIFESTED ACROSS DIFFERENT EVENT PHASES onKeypress - onChange - onBlur 

onKeypress - onChange - onBlur RECONCILE ERRORS MANIFESTED ACROSS DIFFERENT EVENT PHASES 

REACT CONCEPT OF INTERNAL STATE MANAGEMENT MAKES MORE SENSE AND IS EASIER TO MANAGE 

const fieldAlias = 'userLogin'; this.setState({ [fieldAlias]: { ...this.state[fieldAlias], value: changeFn('[email protected]'), touched: true, } }, () => { Promise.all(validations.map((fn) => { return fn(this.state.values, this.serverErrors(), fieldAlias, 'onChange'); })) .then(() => { this.setValid() }) .catch((errors) => { this.setInvalid(errors) }); }); 

REMOVE 1 to 1 MAPPING BETWEEN FIELD VALUES AND VALIDATIONS 

const validationFn = (values, serverErrors = {}, fieldUpdated, eventPhase) { return new Promise((resolve, reject) => { const errors = {}; if (!values.userLogin) { errors.userLogin = 'Please enter your email address'; } Object.assign(errors, serverErrors); if (Object.keys(errors).length === 0) { return resolve(errors); } return reject(errors); }); }; CONDITIONAL VALIDATIONS DEPENDANT ON OTHER FIELDS 

const SignInForm = ({ ...props }) => { const { handleChange, handleBlur, form, method, fields, ...other } = props; const { userLogin, password } = form; return ( {userLogin.touched && userLogin.errors.length > 0 && {userLogin.errors} } ... Sign in ); }; export default conferizeForm(SignInForm, validationFn); 

Consolidated event handling - either onChange or onBlur Conditional validations Sync and async validations declared and resolved using Promise API Composable validations Developers own their form and it's fields Synchronising server and client side validations 

MAKES USERS HAPPY BUT ONLY IF DONE RIGHT 

REACT MAKES THAT A LOT EASIER 

THE END