web-dev-qa-db-fra.com

Comment invalider un TextField dans une interface utilisateur?

J'utilise un composant TextField pour capturer un numéro de téléphone. Pendant que l'utilisateur tape, je veux invalider l'entrée si ce n'est pas un nombre ou si elle ne suit pas un format et n'affiche pas errorText. Actuellement errorText est affiché même sans toucher au champ. Comment puis-je obtenir ce comportement?

Toute aide est grandement appréciée.

validationtextfieldmaterial-ui
13
Mo3z

Extension Larry answer, définissez errorText sur une propriété en état (errorText dans l'exemple ci-dessous). Lorsque la valeur de TextField change, validez l'entrée et définissez la valeur de la propriété (errorText) pour afficher et masquer l'erreur.

class PhoneField extends Component
  constructor(props) {
    super(props)
    this.state = { errorText: '', value: props.value }
  }
  onChange(event) {
    if (event.target.value.match(phoneRegex)) {
      this.setState({ errorText: '' })
    } else {
      this.setState({ errorText: 'Invalid format: ###-###-####' })
    }
  }
  render() {
    return (
      <TextField hintText="Phone"
        floatingLabelText="Phone"
        name="phone"
        errorText= {this.state.errorText}
        onChange={this.onChange.bind(this)}
      />
    )
  }
}
25
Mo3z

À partir de 0.20.1, vous pouvez utiliser helperText et error

<TextField 
    hintText="Phone"
    error ={this.state.errorText.length === 0 ? false : true }
    floatingLabelText="Phone"
    name="phone"
    helperText={this.state.errorText}
    onChange={this.onChange.bind(this)}/>
13
Sam

si errorText est une chaîne vide "", elle ne sera pas affichée. Donc, définissez-le sur celui de getInitialState ().

4
Larry Maccherone

This library s’occupe de tout ce qui concerne la validation des champs et supporte material-ui

Pour valider vos champs, il vous suffit d’envelopper votre composant de champ ... vous permettant d’économiser beaucoup d’efforts pour gérer vous-même l’état manuellement.

<Validation group="myGroup1"
    validators={[
            {
             validator: (val) => !validator.isEmpty(val),
             errorMessage: "Cannot be left empty"
            }, ...
        }]}>
            <TextField value={this.state.value}
                       className={styles.inputStyles}
                       style={{width: "100%"}}
                       onChange={
                        (evt)=>{
                          console.log("you have typed: ", evt.target.value);
                        }


     }/>

2
VISHAL DAGA