move validation to ExpensiForm

Expensify · Dec 9, 2021 · 4a83029 · 4a83029
1 parent 38ec4e2
commit 4a83029
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 11 deletions.
diff --git a/src/components/ExpensiPicker.js b/src/components/ExpensiPicker.js
@@ -62,7 +62,7 @@ class ExpensiPicker extends PureComponent {
                         }}
                         onClose={() => {
                             this.setState({isOpen: false});
-                            this.props.validate(this.props.name, this.props.validation || []);
+                            this.props.validate(this.props.name);
                         }}
                         disabled={this.props.isDisabled}
                         focused={this.state.isOpen}

diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -80,7 +80,7 @@ class BaseExpensiTextInput extends Component {
         if (this.props.onBlur) { this.props.onBlur(event); }
         this.setState({isFocused: false});
         this.deactivateLabel();
-        this.props.validate(this.props.name, this.props.validation || []); // TODO: remove need to pass in empty array
+        this.props.validate(this.props.name);
     }
 
     onChange(event) {

diff --git a/src/components/Form/ExpensiForm.js b/src/components/Form/ExpensiForm.js
@@ -39,6 +39,7 @@ class ExpensiForm extends React.Component {
         this.clearInputErrors = this.clearInputErrors.bind(this);
     }
 
+    // TODO: should we have an autosubmit on change option??
     onSubmit(submit) {
         // Get form values
         const formData = {};
@@ -49,6 +50,9 @@ class ExpensiForm extends React.Component {
             formData[key] = this.inputRefs.current[key].value;
         });
 
+        // Validate each field, return early if we find errors
+
+        // Set loading states, disable form, call onSubmit promise and set loading states
         submit(formData);
     }
 
@@ -61,8 +65,8 @@ class ExpensiForm extends React.Component {
     // automatically pick up validaiton rules, without needed to pass them as an argument.
     // TODO: Accept functions as validation prop?
     // TODO: Automatically check for required fields and other common validation rules, unless optional prop is passed
-    validate(name, rules) {
-        const validation = [ValidationUtils.REQUIRED_FIELD, ...rules];
+    validate(name) {
+        const validation = [ValidationUtils.REQUIRED_FIELD, ...this.props.validation[name]];
         _.each(validation, (rule) => {
             if (rule.pattern.test(this.inputRefs.current[name].value)) {
                 return;

diff --git a/src/libs/ValidationUtils.js b/src/libs/ValidationUtils.js
@@ -285,15 +285,15 @@ const PHONE_NUMBER = [
     {pattern: /^\d{9,15}$/, errorMessage: 'Phone numbers must be between 9 and 15 digits.'},
 ];
 
-const WEBSITE = {
+const WEBSITE = [{
     pattern: CONST.REGEX.HYPERLINK,
     errorMessage: 'Please enter a valid URL',
-};
+}];
 
-const TAX_ID = {
+const TAX_ID = [{
     pattern: /[0-9]{9}/,
     errorMessage: 'Please enter a valid tax ID',
-};
+}];
 
 export {
     meetsAgeRequirements,

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -135,6 +135,11 @@ class CompanyStep extends React.Component {
                 <ExpensiForm
                     name="ReimbursementAccountForm"
                     defaultValues={this.state}
+                    validation={{
+                        'phoneNumber': ValidationUtils.PHONE_NUMBER,
+                        'companyWebsite': ValidationUtils.WEBSITE,
+                        'taxIDNumber': ValidationUtils.TAX_ID,
+                    }}
 
                     // onSubmit={this.submit}
                 >
@@ -213,8 +218,7 @@ class CompanyStep extends React.Component {
                     <ExpensiTextInput
                         name="companyWebsite"
                         label={this.props.translate('companyStep.companyWebsite')}
-                        containerStyles={[styles.mt4]}
-                        validation={[ValidationUtils.WEBSITE]} // TODO: Maybe validation prop can also accept an object in addition to arrays?
+                        containerStyles={[styles.mt4]} // TODO: Maybe validation prop can also accept an object in addition to arrays?
                     />
                     <ExpensiTextInput
                         name="taxIDNumber"
@@ -224,7 +228,6 @@ class CompanyStep extends React.Component {
                         disabled={shouldDisableCompanyTaxID}
                         placeholder={this.props.translate('companyStep.taxIDNumberPlaceholder')}
                         maxLength={CONST.BANK_ACCOUNT.MAX_LENGTH.TAX_ID_NUMBER}
-                        validation={[ValidationUtils.TAX_ID]}
                     />
                     <View style={styles.mt4}>
                         <ExpensiPicker