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.

Sign up for GitHub

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

BUGFIX - validate form fields before submitting #155

Closed
wants to merge 12 commits into from
Closed

BUGFIX - validate form fields before submitting #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b6b102f
BUGFIX - validate form fields before submitting
s-barrah Mar 7, 2019
2d90916
Updated modules
s-barrah Mar 7, 2019
880ec83
Updated yarn lock
s-barrah Mar 7, 2019
30f1c2e
bumped storybook
s-barrah Mar 7, 2019
f2b0059
Removed white space from last name regex pattern
s-barrah Mar 8, 2019
78ec28d
Modified last name pattern to allow only alphanumeric characters first
s-barrah Mar 8, 2019
1f0232b
fix yarn lock
s-barrah Mar 8, 2019
e9c0a75
Updated cypress tests
s-barrah Mar 8, 2019
4baa339
Modified snyk ignore
s-barrah Mar 8, 2019
9ce51b4
fixed merge conflicts
s-barrah Mar 19, 2019
d49189c
fixed merge conflicts
s-barrah Mar 19, 2019
f501cce
fixed yarn.lock conflicts
s-barrah Mar 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions cypress/integration/submit_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@ describe('e2e test', () => {
cy.get('#field-error--lastname>span').should('contain', 'Please fill in your last name')
cy.get('#field-input--lastname').type('test@')
cy.get('#field-error--lastname>span').should('contain', 'This field only accepts 25 alphanumeric characters and , . ( ) / & \' - ')
cy.get('#field-input--lastname').type('&test')
cy.get('#field-error--lastname>span').should('contain', 'This field only accepts 25 alphanumeric characters and , . ( ) / & \' - ')
cy.get('#field-error--lastname>span').should('contain', 'This field only accepts 25 alphanumeric characters and , . ( ) / & \' - ')
cy.get('#field-input--lastname').clear().type('Test-test')
cy.get('#field-error--lastname>span').should('be.not.visible')
cy.get('#field-input--lastname').clear().type(' '+lastName)
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"resolve": "1.6.0",
"snyk": "^1.124.1",
"susy": "^3.0.3",
"validate.js": "^0.12.0",
"whatwg-fetch": "2.0.3"
},
"scripts": {
Expand Down
30 changes: 21 additions & 9 deletions src/pages/GiftAidForm/GiftAidForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import React, { Component } from 'react';
import propTypes from 'prop-types';
import axios from 'axios';
import validate from 'validate.js';
import InputField from '@comicrelief/storybook/src/components/InputField/InputField';
import JustInTime from '@comicrelief/storybook/src/components/JustInTime/JustInTime';
import PostcodeLookup from '@comicrelief/storybook/src/components/PostcodeLookup/PostcodeLookup';
import MarketingConsent from '@comicrelief/storybook/src/components/MarketingConsent/MarketingConsent';
import defaultInputFieldsData from './defaultGiftaidFields.json';
import SiteService from '../../service/Site.service';
import marketingConsentData from './marketingConsentData.json';
import formConstraints from './formConstraints.json';

const ENDPOINT_URL = process.env.REACT_APP_ENDPOINT_URL;

Expand Down Expand Up @@ -258,14 +260,20 @@ class GiftAidForm extends Component {
return inputFields;
}

validateFormFields(formValues) {
return new Promise((resolve, reject) => {
const validation = validate(formValues, formConstraints);
if (typeof validation === 'undefined') {
return resolve();
}
return reject(validation);
});
}

/**
* Creates formValues object and submits form
*/
submitForm() {
if (this.state.showErrorMessages !== false && this.state.formValidity !== true) {
return false;
}

const url = this.getCurrentUrl();
const campaign = this.site.get('campaign').name;
// required settings to post to api endpoint
Expand Down Expand Up @@ -302,8 +310,9 @@ class GiftAidForm extends Component {
// Combine all form data and settings
const formValues = Object.assign({}, fieldValues, settings);

// post form data and settings to endpoint
axios.post(ENDPOINT_URL, formValues)
// validate form fields
this.validateFormFields(formValues)
.then(() => axios.post(ENDPOINT_URL, formValues))// post form data and settings to endpoint
.then(() => {
this.props.submitHasCompleted(true);
this.props.history.push({
Expand All @@ -316,8 +325,6 @@ class GiftAidForm extends Component {
pathname: '/sorry',
});
});

return true;
}

/**
Expand Down Expand Up @@ -352,9 +359,14 @@ class GiftAidForm extends Component {
formValidity: true,
showErrorMessages: false,
validating: false,
}, this.submitForm);
}, this.checkFormValidity);
}

checkFormValidity() {
if (this.state.showErrorMessages === false && this.state.formValidity === true) {
this.submitForm();
}
}
/**
* Renders out the just in time message
*/
Expand Down
86 changes: 86 additions & 0 deletions src/pages/GiftAidForm/formConstraints.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
{
"firstname": {
"presence": {
"allowEmpty": false
}
},
"lastname": {
"presence": {
"allowEmpty": false
}
},
"mobile": {
"presence": {
"allowEmpty": false
}
},
"address1": {
"presence": {
"allowEmpty": false
}
},
"address2": {
"presence": false
},
"address3": {
"presence": false
},
"town": {
"presence": {
"allowEmpty": false
}
},
"postcode": {
"presence": {
"allowEmpty": false
}
},
"country": {
"presence": {
"allowEmpty": false
}
},
"campaign": {
"presence": {
"allowEmpty": false
}
},
"transSource": {
"presence": {
"allowEmpty": false
}
},
"transSourceUrl": {
"presence": {
"allowEmpty": false
},
"url": {
"allowLocal": true
}
},
"transType": {
"presence": {
"allowEmpty": false
}
},
"confirm": {
"presence": true,
"numericality": {
"onlyInteger": true,
"greaterThanOrEqualTo": 0,
"lessThanOrEqualTo": 1
}
},
"permissionPost": {
"presence": false
},
"permissionEmail": {
"presence": false
},
"permissionPhone": {
"presence": false
},
"permissionSMS": {
"presence": false
}
}
79 changes: 37 additions & 42 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -607,6 +607,7 @@
grunt-contrib-copy "^1.0.0"
susy "^2.2.12"
underscore.string "3.3.5"

"@comicrelief/[email protected]":
version "1.18.11"
resolved "https://registry.yarnpkg.com/@comicrelief/storybook/-/storybook-1.18.11.tgz#5951f12b4b5ed659e383f92d012febadc6ec6244"
Expand Down Expand Up @@ -3739,13 +3740,6 @@ create-react-class@^15.5.2, create-react-class@^15.6.2:
loose-envify "^1.3.1"
object-assign "^4.1.1"

create-react-context@^0.2.2:
version "0.2.3"
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
dependencies:
fbjs "^0.8.0"
gud "^1.0.0"

[email protected], cross-spawn@^5.0.1, cross-spawn@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
Expand Down Expand Up @@ -5262,7 +5256,7 @@ faye-websocket@~0.11.0, faye-websocket@~0.11.1:
dependencies:
websocket-driver ">=0.5.1"

fbjs@^0.8.0, fbjs@^0.8.12, fbjs@^0.8.4, fbjs@^0.8.9:
fbjs@^0.8.12, fbjs@^0.8.4, fbjs@^0.8.9:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
dependencies:
Expand Down Expand Up @@ -5933,10 +5927,6 @@ grunt-contrib-copy@^1.0.0:
chalk "^1.1.1"
file-sync-cmp "^0.1.0"

gud@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"

[email protected]:
version "3.0.0"
resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
Expand Down Expand Up @@ -6111,7 +6101,7 @@ header-case@^1.0.0:
no-case "^2.2.0"
upper-case "^1.1.3"

history@^4.8.0-beta.0, history@^4.9.0:
history@^4.7.2:
version "4.9.0"
resolved "https://registry.yarnpkg.com/history/-/history-4.9.0.tgz#84587c2068039ead8af769e9d6a6860a14fa1bca"
dependencies:
Expand All @@ -6138,11 +6128,9 @@ [email protected], hoist-non-react-statics@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"

hoist-non-react-statics@^3.1.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
dependencies:
react-is "^16.7.0"
hoist-non-react-statics@^2.5.0:
version "2.5.5"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"

home-or-tmp@^2.0.0:
version "2.0.0"
Expand Down Expand Up @@ -6614,7 +6602,7 @@ into-stream@^3.1.0:
from2 "^2.1.1"
p-is-promise "^1.1.0"

invariant@^2.2.1, invariant@^2.2.2:
invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
dependencies:
Expand Down Expand Up @@ -9837,7 +9825,7 @@ react-inspector@^2.2.2:
is-dom "^1.0.9"
prop-types "^15.6.1"

react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
react-is@^16.3.2, react-is@^16.8.1:
version "16.8.4"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"

Expand Down Expand Up @@ -9907,31 +9895,27 @@ react-raven@^1.2.3:
lodash "^4.17.4"

react-router-dom@^4.2.2:
version "4.4.0"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.4.0.tgz#fad67b46375f7081a76d1c92a83a92d28b5abc35"
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
dependencies:
"@babel/runtime" "^7.1.2"
history "^4.8.0-beta.0"
history "^4.7.2"
invariant "^2.2.4"
loose-envify "^1.3.1"
prop-types "^15.6.2"
react-router "^4.4.0"
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
prop-types "^15.6.1"
react-router "^4.3.1"
warning "^4.0.1"

react-router@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.4.0.tgz#e8b8b88329f564d4c48b7ee631b10310188c6888"
react-router@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
dependencies:
"@babel/runtime" "^7.1.2"
create-react-context "^0.2.2"
history "^4.9.0"
hoist-non-react-statics "^3.1.0"
history "^4.7.2"
hoist-non-react-statics "^2.5.0"
invariant "^2.2.4"
loose-envify "^1.3.1"
path-to-regexp "^1.7.0"
prop-types "^15.6.2"
react-is "^16.6.0"
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
prop-types "^15.6.1"
warning "^4.0.1"

react-split-pane@^0.1.77:
version "0.1.85"
Expand Down Expand Up @@ -10918,6 +10902,7 @@ [email protected]:
graphlib "^2.1.1"
tmp "0.0.33"
toml "^2.3.2"

[email protected]:
version "2.1.5"
resolved "https://registry.yarnpkg.com/snyk-gradle-plugin/-/snyk-gradle-plugin-2.1.5.tgz#1549e024c8180330c2398632e29663666d5a9765"
Expand Down Expand Up @@ -11035,9 +11020,9 @@ [email protected], snyk-try-require@^1.1.1, snyk-try-require@^1.3.1:
lru-cache "^4.0.0"
then-fs "^2.0.0"

snyk@^1.52.0, snyk@^1.83.0:
version "1.136.3"
resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.136.3.tgz#29a32a19b5f7b757b4ab807d3d413a28d04dface"
snyk@^1.124.1, snyk@^1.52.0:
version "1.139.0"
resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.139.0.tgz#fc4de8021dea8d524bf19b3dd20a8879f9f863ab"
dependencies:
"@snyk/dep-graph" "1.4.0"
"@snyk/gemfile" "1.2.0"
Expand Down Expand Up @@ -12303,6 +12288,10 @@ validate-npm-package-license@^3.0.1:
spdx-correct "^3.0.0"
spdx-expression-parse "^3.0.0"

validate.js@^0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.12.0.tgz#17f989e37c192ea2f826bbf19bf4e97e6e4be68f"

value-equal@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
Expand Down Expand Up @@ -12379,6 +12368,12 @@ w3c-xmlserializer@^1.0.1:
webidl-conversions "^4.0.2"
xml-name-validator "^3.0.0"

warning@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
dependencies:
loose-envify "^1.0.0"

warning@^4.0.1:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
Expand Down