Skip to content

Instantly share code, notes, and snippets.

@msert29
Last active September 3, 2019 09:22
Show Gist options
  • Save msert29/c9dcfbce71df5ecb828d59c18a040940 to your computer and use it in GitHub Desktop.
Save msert29/c9dcfbce71df5ecb828d59c18a040940 to your computer and use it in GitHub Desktop.
A simple validation method to validate given user inputs for address
export default class Delivery extends Component {
state = {
streetName: undefined,
postcode: undefined,
city: undefined
};
constructor(props) {
super(props);
this._postcodeEntry = undefined;
this._addressEntry = undefined;
this._cityEntry = undefined;
}
validateAndSetAttribute(key, value) {
// Ideally these should be declared in constants.js file
const postcodeRegex = /([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z]))))\s?[0-9][A-Za-z]{2})/;
const addressRegex = /^(\d{0,3}[0–9])(\s\w{1,}[A-Za-z])+/;
const cityRegex = /^(\w[A-Za-z ]{2,57})/;
this.setState({ key: value });
let borderColor;
switch (key) {
case "postcode":
borderColor = value.match(postcodeRegex) === null ? "red" : "white";
this._postcodeEntry.setNativeProps({
style: { borderColor }
});
break;
case "streetName":
borderColor = value.match(addressRegex) === null ? "red" : "white";
this._addressEntry.setNativeProps({
style: { borderColor }
});
break;
case "city":
borderColor = value.match(cityRegex) === null ? "red" : "white";
this._cityEntry.setNativeProps({
style: { borderColor }
});
break;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment