0

redux-form の電話番号フィールドがあります。このフィールドをオプションにしたいのですが (ユーザーが値を送信しない場合はデフォルトで '' になります)、値を入力する場合は、有効な電話番号であることを確認する必要があります。

私が抱えている問題は、フォームの送信ボタンが現在無効になっており、Redux フォームが有効かどうかに関連付けられていることです。デフォルトの '' 値がある場合、これが有効であると見なされない理由がわかりません。電話番号フィールドに何かが入力されると、valid が true に変わるようです。

何かが送信された場合に検証を確認するにはどうすればよいですか? ありがとう！

検証

const validate = (values) => {
  const errors = {};

  if (!/^[0-9-.() ]*$/i.test(values.phoneNumber)) {
    errors.phoneNumber = 'Invalid phone number';
  }

  return errors;
};

フォームフィールド

<div className={classNames(['form-field', {
  'error': phoneNumber.touched && phoneNumber.error,}])}
>
  <label className="form-field-title">
    Phone Number 
      {
        phoneNumber.touched && 
        phoneNumber.error && 
        <span>{phoneNumber.error}</span>
      }
  </label>

    <input
      type="text"
      className="form-input-field"
      {...phoneNumber}
      value={phoneNumber.value || ''}
    />
</div>

送信ボタン

<button
  type="submit"
  className="btn dark"
  disabled={!this.props.valid}
>
  <span className="submit-text">
    {this.state.submitText}
  </span>
  <i className="fa fa-check"/>
</button>
4

1 に答える 1

1

phoneNumber正規表現をテストする前に、何かあるかどうかを試してみてください。

if (values.phoneNumber && !/^[0-9-.() ]*$/i.test(values.phoneNumber)) {
    errors.phoneNumber = 'Invalid phone number';
  }

が空の場合values.phoneNumber、エラー オブジェクトは空を返し、有効なプロップは true である必要があります。

于 2016-07-02T06:49:30.080 に答える