CODEWITHSUNDEEP
reactjsreact-native
Daniel
Daniel

Reputation: 15413

React Native validate function not working

I want to ensure I am testing this correctly.

This is what is happening:

Test steps

  1. Nav to My Account>Home Information>Home Phone

  2. Input the following string: 1112345678

  3. Attempt to Save and observe the error message from validatesPhones.

  4. Change it to a correct number.

  5. Attempt to save and observe the error message from _handleSubmit helper.

You can't input a correct number until you log out and log back in.

I believe the issue is in this _validate function:

_validate = () => {
    const isValid = Object.keys(this.props.validationErrors).reduce(
      (acc, curr) => {
        if (this.props.validationErrors[acc] !== "") {
          return false;
        }

        return acc;
      },
      true
    );

    return isValid;
  };

Is returning a validation of true when I put in the wrong type of digits, but the amount of digits is correct, so it returns true and then it runs this function to tell the user the phone number has to be valid and 10 digits:

function validatePhones(state, payload) {
  const [key] = Object.keys(payload);
  console.log([key]);
  if (["homePhone", "mobilePhone"].includes(key)) {
    const isValid =
      payload[key].length === 0 || regex.phoneNumber.test(payload[key]);
    console.log(isValid);
    const message = isValid
      ? ""
      : "Phone number must be valid and contain 10 digits";
    console.log(message);

    return {
      ...state,
      validationErrors: {
        ...state.validationErrors,
        [key]: message
      }
    };
  }



return state;
}

when I enter the correct phone number after removing the incorrect phone number, the first function, the _validate() function returns false which then _handleSubmit sees that and instead of submitting the phone number it provides the alert at the end:

_handleSubmit = () => {
    const isValid = this._validate();
    console.log("is the phone number valid: ", isValid);
    if (isValid) {
      this.setState({ displaySpinner: true });
      this.props
        .submitPhoneNumbers(this.props)
        .then(() => {
          this.setState({ displaySpinner: false });
          //eslint-disable-next-line
          this.props.navigation.goBack();
        })
        .catch(() => {
          this.setState({ displaySpinner: false });
        });
    } else {
      alert("Please, fix all the errors before saving your changes.");
    }
  };

Is there a better way to develop that _validate function?

Upvotes: 4

Views: 980

Answers (2)

Ankit Makwana
Ankit Makwana

Reputation: 2451

If you are getting proper json in this.props.validationErrors in _validate function then just use Current Value (curr) instead of Accumulator (acc) in that function like this: 

if (this.props.validationErrors[curr] !== "") {
     return false;
}

Upvotes: 2

JLD
JLD

Reputation: 570

You should do one of the followings:

handleSubmit = (event) => {
    console.log("there should be a phone number here: ", event.target.value);
  }

or 

...
handleSubmit={this.handleSubmit.bind(this)}
...

Upvotes: 0

Related Questions