Issue in react final form

Question

I am using react final form for validation purpose for login page which has forgot password and register link as well, now when I am clicking forgot password or register link ,it should not trigger any validation even though I am not filling my user name and password .I have tried t keep forgot password and register link away from tag but it is still triggering the validation on click of forgot password and register link .It should only trigger the validation when I m hitting submit button.

It should not ask to validate the form when I am clicking on any hyper link on the page as hyperlinks does not have any validations.

Here is the code sample

loginPage = () => {
    const {t: translate} = this.props;
    const {
      match: {
        params: {
          authUrlKey = ''
        } = {},
      } = {},
    } = this.props;
    return (
      <Form
        onSubmit={ (values)=> this.validateUserCredentials(values)}
        render={({ handleSubmit}) => (
          <form onSubmit={handleSubmit}>
            <button className="hidden" type="submit"/>
            <h1 className="hw-block--pb">{translate('login.heading')}</h1>
            <p className="hw-text-lead hw-block--pb-small">{translate('login.text')}</p>
            { this.state.description !==''  &&  <p className="hw-text-lead hw-block--pb-small">{this.state.description}</p> }

            <div className="hw-grid">
              <div className="hw-grid__item hw-one-whole hw-medium--one-fifth hw-large--one-sixth">
                <label className="hw-label">{translate('login.landcode')}
                  <Field name="landcode" component={Dropdown} options={getCountryList()} onOptionSelect={this.onCountrySelect}/>
                </label>
              </div>
              <div className="hw-grid__item hw-one-whole hw-medium--four-fifths hw-large--five-sixths">
                <label className="hw-label">{translate('login.mobileNumber')}
                  <Field type="text" component={InputType}
                    validate={composeValidators(mobileNumberRequired, validMobileNumberWithISDCode)}
                    placeholder={translate('login.mobileNumberPlaceHolder')} name="phoneNumber"/>
                </label>
              </div>
            </div>

            <label className="hw-label">{translate('login.password')}

              <Field type="password" component={InputType} validate={passwordRequired}  placeholder={translate('login.passwordPlaceHolder')}  name="password"/>
            </label>
            <Link className="hw-link" to={{ pathname: '/password/reset', state: {authUrlKey} }}>{translate('login.forgotPassword')}</Link>

            <ErrorInfo error={this.state.error} errorMessage={this.state.errorMessage} translate={translate}/>

            <div className="hw-block hw-block--mt-small">
              <div className="hw-grid">
                <div className="hw-grid__item hw-small--one-whole hw-medium--one-quarter hw-block--mb-smaller">
                  <button className="hw-button hw-button--primary hw-button--full" type="submit">{translate('login.loginButton')}</button>
                </div>
                <div className="hw-grid__item hw-one-whole hw-medium--three-quarters hw-block--mt-smaller">
                  <Link className="hw-link"
                    to={{ pathname: '/register', state: {authUrlKey} }}>{translate('login.registerButton')}</Link>
                </div>
              </div>
            </div>

          </form>)}
      />
    )}

validations function used in code

export const validMobileNumberWithISDCode = (fieldValue='') => {
  const value = trimValue(fieldValue);
  const regex1 = /^\+?((45)|(46)|(47))?( )?\d{8,10}$/
  return (regex1.test(value))? undefined :  message[root.lang].validMobileNumber;
}

export const validMobileNumber = (fieldValue='') => {
  const value = trimValue(fieldValue);
  const regex1 =  /^\d{8,10}$/;
  return (regex1.test(value))? undefined :  message[root.lang].validMobileNumber;
}

export const mobileNumberRequired = (fieldValue='') => {
  const value = trimValue(fieldValue);
  return value ? undefined : message[root.lang].mobileNumberRequired;
}

export const passwordRequired = (fieldValue='') => {
  const value = trimValue(fieldValue);
  return value ? undefined: message[root.lang].passwordRequired;
}

export const required =(fieldValue)=> {
  const value = trimValue(fieldValue);
  return value ? undefined : message[root.lang].required;
}```

validateUserCredentials -> This function does not contains any validation.It is used to retrieve form values and send it to server

Erik R. Erik R. · Accepted Answer · 2019-11-26T08:53:04

React Final Form calls your validation function on every value change in the form, to ensure that the form validity is always up to date. Since you did not include the code for your validation function, I cannot ascertain what you are attempting to do. Your validation function should be very cheap to run (e.g. required fields, value length, etc.). The actual authentication should happen on submit.

Issue in react final form

1 Answers