Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

client side validation on address book #4183

Merged
merged 5 commits into from Apr 18, 2018
Merged
Changes from 4 commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.
+92 −21
Diff settings

Always

Just for now

@@ -80,6 +80,42 @@ class AddressBookForm extends Component {
}
// Address Book Form helpers

fieldLabelMap = {
region: {
label: "Region",
i18nKeyLabel: "address.region"
},
country: {
label: "Country",
i18nKeyLabel: "address.country"
},
fullName: {
label: "Full Name",
i18nKeyLabel: "address.fullName"
},
address1: {
label: "Address",
i18nKeyLabel: "address.address1"
},
address2: {
label: "Address",
i18nKeyLabel: "address.address2"
},
postal: {
label: "Postal",
i18nKeyLabel: "address.postal"
},
city: {
label: "City",
i18nKeyLabel: "address.city"
},
phone: {
label: "Phone",
i18nKeyLabel: "address.phone"
}
}


/**
* @method setRegionOptions
* @summary creates an array of region options for the regions select field.
@@ -103,6 +139,30 @@ class AddressBookForm extends Component {
}
}

clientValidation = (enteredAddress) => {
const requiredFields = ["country", "fullName", "address1", "postal", "city", "region", "phone"];
const validation = { messages: {} };
let isValid = true;
Object.keys(enteredAddress).forEach((key) => {

This comment has been minimized.

Copy link
@zenweasel

zenweasel Apr 17, 2018

Member

I wish this is a little more extendable, but since this will probably be replaced by some sort of React-Autoform form I am fine for now.

if (requiredFields.indexOf(key) > -1 && !enteredAddress[key].trim()) {
validation.messages[key] = {
message: `${this.fieldLabelMap[key].label} is required`
};
isValid = false;
}
});
if (!isValid) {
this.setState({
validation
});
} else {
this.setState({
validation: undefined
});
}
return isValid;
}

// Address Book Form Actions

/**
@@ -115,7 +175,9 @@ class AddressBookForm extends Component {
const { add } = this.props;
const { fields: enteredAddress } = this.state; // fields object as enteredAddress
// TODO: field validatiion
add(enteredAddress);
if (this.clientValidation(enteredAddress)) {
add(enteredAddress);
}
}

/**
@@ -243,31 +305,33 @@ class AddressBookForm extends Component {

render() {
const { countries } = this.props;
const { regions, fields } = this.state;
const { regions, fields, validation } = this.state;
let regionField;
if (regions.length === 0) {
// if no region optioins
// render a TextField
regionField = (
<Components.TextField
i18nKeyLabel="address.region"
label="Region"
i18nKeyLabel={this.fieldLabelMap.region.i18nKeyLabel}
label={this.fieldLabelMap.region.label}
name="region"
onChange={this.onFieldChange}
value={fields.region}
validation={validation}
/>
);
} else {
// if region optioins
// render a Select
regionField = (
<Components.Select
i18nKeyLabel="address.region"
label="Region"
i18nKeyLabel={this.fieldLabelMap.region.i18nKeyLabel}
label={this.fieldLabelMap.region.label}
name="region"
options={regions}
onChange={this.onSelectChange}
value={fields.region}
validation={validation}
/>
);
}
@@ -276,67 +340,73 @@ class AddressBookForm extends Component {
<div className="row">
<div className="col-md-6">
<Components.Select
i18nKeyLabel="address.country"
label="Country"
i18nKeyLabel={this.fieldLabelMap.country.i18nKeyLabel}
label={this.fieldLabelMap.country.label}
name="country"
options={countries}
onChange={this.onSelectChange}
placeholder="Country"
value={fields.country}
validation={validation}
/>
</div>
</div>

<div className="row">
<div className="col-md-6">
<Components.TextField
i18nKeyLabel="address.fullName"
label="Full Name"
i18nKeyLabel={this.fieldLabelMap.fullName.i18nKeyLabel}
label={this.fieldLabelMap.fullName.label}
name="fullName"
onChange={this.onFieldChange}
value={fields.fullName}
validation={validation}
/>
</div>
</div>

<div className="row">
<div className="col-md-6">
<Components.TextField
i18nKeyLabel="address.address1"
label="Address"
i18nKeyLabel={this.fieldLabelMap.address1.i18nKeyLabel}
label={this.fieldLabelMap.address1.label}
name="address1"
onChange={this.onFieldChange}
value={fields.address1}
validation={validation}
/>
</div>
<div className="col-md-6">
<Components.TextField
i18nKeyLabel="address.address2"
label="Address"
i18nKeyLabel={this.fieldLabelMap.address2.i18nKeyLabel}
label={this.fieldLabelMap.address2.label}
name="address2"
onChange={this.onFieldChange}
value={fields.address2}
validation={validation}
/>
</div>
</div>

<div className="row">
<div className="col-md-4">
<Components.TextField
i18nKeyLabel="address.postal"
label="Postal"
i18nKeyLabel={this.fieldLabelMap.postal.i18nKeyLabel}
label={this.fieldLabelMap.postal.label}
name="postal"
onChange={this.onFieldChange}
value={fields.postal}
validation={validation}
/>
</div>
<div className="col-md-4">
<Components.TextField
i18nKeyLabel="address.city"
label="City"
i18nKeyLabel={this.fieldLabelMap.city.i18nKeyLabel}
label={this.fieldLabelMap.city.label}
name="city"
onChange={this.onFieldChange}
value={fields.city}
validation={validation}
/>
</div>
<div className="col-md-4">
@@ -347,11 +417,12 @@ class AddressBookForm extends Component {
<div className="row">
<div className="col-md-4">
<Components.TextField
i18nKeyLabel="address.phone"
label="Phone"
i18nKeyLabel={this.fieldLabelMap.phone.i18nKeyLabel}
label={this.fieldLabelMap.phone.label}
name="phone"
onChange={this.onFieldChange}
value={fields.phone}
validation={validation}
/>
</div>
</div>
@@ -13,7 +13,7 @@ class TextField extends Component {
*/
get value() {
// if the props.value is not a number
// return ether the value or and empty string
// return either the value or and empty string
if (isNaN(this.props.value)) {
return this.props.value || "";
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.