Как проверить необязательное поле?

Question

У меня есть поле номера телефона в редукционной форме. Я хочу, чтобы это поле было необязательным (по умолчанию используется значение «если пользователь не отправляет значение), но если они вводят значение, оно должно проверяться, чтобы убедиться, что это действительный номер телефона.

Проблема, с которой я сталкиваюсь, заключается в том, что кнопка отправки моей формы в настоящее время отключена и привязана к моей форме Redux. Я не уверен, почему это не будет считаться действительным, если оно имеет значение по умолчанию. Кажется, что это действительно верно, если что-то введено в поле номера телефона.

Как я могу проверить на подтверждение, если что-то подано, иначе пропустите '' и все еще сохраните мою форму? Благодаря!

Validation

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> 

Answer 1

Try и тест т o посмотреть, действительно ли phoneNumber перед тестированием RegEx.

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

Если values.phoneNumber пусто, то ваш объект ошибка будет возвращать пустой, и действительная опора должна быть правдой.