add validation to profile page

Author: nazaninreihani

src/settings/SettingsAddress.js

@@ -1,9 +1,12 @@
 import React, { PureComponent } from 'react';
+import head from 'lodash.head';
+import validate from 'validate.js';
 import { Legend, Button, InputGroup, ErrorMsg, ServerErrorMsg } from 'binary-components';
 import { actions } from '../_store';
 import States from './States';
 import UpdateNotice from '../containers/UpdateNotice';
 import * as LiveData from '../_data/LiveData';
+import { getConstraints } from './SettingsAddress.validation.config';
 
 export default class SettingsAddress extends PureComponent {
 
@@ -28,6 +31,14 @@ export default class SettingsAddress extends PureComponent {
 			address_state: props.address_state,
 			address_postcode: props.address_postcode,
 			phone: props.phone,
+      touched: {
+        address_line_1: false,
+        address_line_2: false,
+        address_city: false,
+        address_state: false,
+        address_postcode: false,
+				phone: false,
+			},
 		};
 	}
 
@@ -36,15 +47,27 @@ export default class SettingsAddress extends PureComponent {
         actions.getStatesForCountry(country_code);
     }
 
-	onEntryChange = (e: SyntheticEvent) =>
-		this.setState({ [e.target.id]: e.target.value });
+  onEntryChange = (e: SyntheticEvent) =>
+		this.setState({
+			[e.target.id]: e.target.value,
+			touched: { ...this.state.touched, [e.target.id]: true },
+			hasError: false,
+		}, () => {
+		this.validateForm();
+	});
 
-	onFormSubmit = (e: SyntheticEvent) => {
-		e.preventDefault();
+  validateForm = () => {
+		this.constraints = getConstraints(this.props, this.state);
 		this.setState({
-			validatedOnce: true,
+			errors: validate(this.state, this.constraints, { format: 'grouped', fullMessages: false, cleanAttributes: false }) || {},
 		});
-		if (this.allValid) {
+	}
+
+	onFormSubmit = (e: SyntheticEvent) => {
+		e.preventDefault();
+    if (Object.keys(this.state.errors).length > 0) {
+			this.setState({ hasError: true });
+		} else {
 			this.performUpdateSettings();
 		}
 	}
@@ -71,63 +94,69 @@ export default class SettingsAddress extends PureComponent {
 
 	render() {
 		const { states } = this.props;
-		const { validatedOnce, address_line_1, address_line_2, address_city, address_state,
-			address_postcode, country_code, phone, phoneError, serverError, success } = this.state;
-
-		this.allValid = address_line_1 && address_city;
+		const { address_line_1, address_line_2, address_city, address_state,
+			address_postcode, country_code, phone, serverError, success, hasError, touched, errors } = this.state;
 
 		return (
 			<form className="settings-address" onSubmit={this.onFormSubmit}>
 				{serverError && <ServerErrorMsg text={serverError} />}
+        {hasError && <ErrorMsg text="Please fill the form with valid values" />}
 				<UpdateNotice text="Address updated" show={success} />
 				<Legend text="Address" />
 				<InputGroup
 					id="address_line_1"
+					name="address_line_1"
 					type="text"
 					label="Address"
 					value={address_line_1}
 					onChange={this.onEntryChange}
 				/>
-				{validatedOnce && !address_line_1 &&
-					<ErrorMsg text="This field is required." />
-				}
+				{touched.address_line_1 && <ErrorMsg text={head((errors || {}).address_line_1)} />}
 				<InputGroup
 					id="address_line_2"
+					name="address_line_2"
 					type="text"
 					label=" "
 					value={address_line_2}
 					onChange={this.onEntryChange}
 				/>
+        {touched.address_line_2 && <ErrorMsg text={head((errors || {}).address_line_2)} />}
 				<InputGroup
 					id="address_city"
+					name="address_city"
 					type="text"
 					label="Town/City"
 					defaultValue={address_city}
 					onChange={this.onEntryChange}
 				/>
+        {touched.address_city && <ErrorMsg text={head((errors || {}).address_city)} />}
 				<States
 					id="address_state"
+					name="address_state"
 					country={country_code}
 					states={states}
 					onChange={this.onEntryChange}
 					selected={address_state}
 				/>
+        {touched.address_state && <ErrorMsg text={head((errors || {}).address_state)} />}
 				<InputGroup
 					id="address_postcode"
+					name="address_postcode"
 					type="text"
 					label="Postal Code / ZIP"
 					defaultValue={address_postcode}
 					onChange={this.onEntryChange}
 				/>
+        {touched.address_postcode && <ErrorMsg text={head((errors || {}).address_postcode)} />}
 				<InputGroup
 					id="phone"
+					name="phone"
 					type="tel"
 					label="Telephone"
 					defaultValue={phone}
 					onChange={this.onEntryChange}
 				/>
-				{phoneError === 'length' && <ErrorMsg text="You should enter between 6-35 characters." />}
-				{phoneError === 'allowed' && <ErrorMsg text="Only numbers, space, - are allowed." />}
+        {touched.phone && <ErrorMsg text={head((errors || {}).phone)} />}
 				<Button
 					text="Update"
 					onClick={this.tryUpdate}

src/settings/SettingsAddress.validation.config.js

@@ -0,0 +1,64 @@
+import validate from 'validate.js';
+
+/*eslint-disable */
+validate.validators.validateAddress = (value) => {
+  if(/[`~!#$%^&*)(_=+\[}{\]\\";:\?><|]+/.test(value)) {
+    return 'Only letters, numbers, space, hyphen, period, and apostrophe are allowed.';
+  }
+}
+
+validate.validators.validateGeneral = (value) => {
+  if(/[`~!@#$%^&*)(_=+\[}{\]\\\/";:\?><,|\d]+/.test(value)) {
+    return 'Only letters, space, hyphen, period, and apostrophe are allowed.';
+  }
+}
+/*eslint-enable */
+
+export const getConstraints = () => {
+  const constraints = {
+    address_line_1: {
+      presence: {
+        presence: true,
+        message: 'This field is required.',
+      },
+      validateAddress: true,
+    },
+    address_line_2: {
+      validateAddress: true,
+    },
+    address_city: {
+      presence: {
+        presence: true,
+        message: 'This field is required.',
+      },
+      validateGeneral: true,
+    },
+    address_state: {
+      presence: {
+        presence: true,
+        message: 'This field is required.',
+      },
+    },
+    address_postcode: {
+      format: {
+        /*eslint-disable */
+        pattern: /^([a-zA-Z\d-\s])*$/,
+        /*eslint-enable */
+        message: 'Only letters, numbers, space, and hyphen are allowed.',
+      },
+    },
+    phone: {
+      presence: {
+        presence: true,
+        message: 'This field is required.',
+      },
+      format: {
+        /*eslint-disable */
+        pattern: /^\+?[0-9\s]*$/,
+        /*eslint-enable */
+        message: 'Only numbers and spaces are allowed.',
+      },
+    },
+  };
+  return constraints;
+};