Wie validiere ich ein optionales Feld?

Question

Ich habe ein Telefonnummer Feld in Redux-Form. Ich möchte, dass dieses Feld optional ist (standardmäßig '', wenn der Benutzer keinen Wert einreicht), aber wenn sie einen Wert eingeben, sollte es überprüfen, ob es eine gültige Telefonnummer ist.

Das Problem, das ich habe, ist, dass der Absenden-Button meines Formulars derzeit deaktiviert ist und daran gebunden ist, ob mein Redux-Formular gültig ist. Ich bin mir nicht sicher, warum dies nicht als gültig gilt, wenn es einen Standardwert hat. Es scheint sich gültig zu ändern, sobald etwas in das Telefonnummernfeld eingegeben wurde.

Wie kann ich die Validierung überprüfen, wenn etwas eingereicht wurde, ansonsten weitergeben '' und trotzdem mein Formular gültig sein? Vielen Dank!

Validation

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

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

    return errors; 
}; 

Formularfeld

<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> 

Senden-Schaltfläche

<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 and Test t o sehen Sie, ob phoneNumber alles ist, bevor Sie die RegEx testen.

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

Wenn values.phoneNumber leer ist, dann wird Ihr Fehler Objekt zurückgeben leer, und die gültige Stütze wahr sein sollte.