0
votes

Comment mettre en évidence le champ de saisie obligatoire (*) vide avec une bordure rouge cliquez sur le bouton dans React?

Dans la capture d'écran de l'image ci-dessous, je rends les champs obligatoires, alors cliquez sur le bouton d'enregistrement. Si des champs sont alors ce champ vide que je veux mettre en évidence avec une bordure rouge dans React comment est-ce possible? ( https://blueprintjs.com/docs/#core/components/text-inputs )

constructor(props) {
    super(props);
    this.state = {
        firstName: '',
        lastName: '',
        email: '',
        password: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.registerForm = this.registerForm.bind(this);
}

handleChange(event) {
    this.setState({[event.target.name]: event.target.value});
}

registerForm(){
    if(this.state.firstName.trim() && this.state.lastName.trim() && 
       this.state.email && this.state.password){
         console.log("registration successfully..!!"); 
    }else{
         console.log("all * marked fields mandatory");
    }
}

render() {
  return (
    <div>
      <h2>Fill Registration Details..!!</h2>
        <InputGroup placeholder="Enter First Name...*"            
          name="firstName" value={this.state.firstName} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter Last Name...*" name="lastName" 
         value={this.state.lastName} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter your email...*" name="email"
         value={this.state.email} onChange={this.handleChange}/>

        <InputGroup placeholder="Enter your password...*"name="password" 
         value={this.state.password} onChange={this.handleChange}/>

        <Button intent="Primary" onClick={this.registerForm}>Register</Button>
       </div>
    )
  }

javascript reactjs html css validation

0 commentaires

3 Réponses :

0
votes

Vous pouvez créer une classe CSS - disons .red-border et l'ajouter à votre entrée chaque fois que sa valeur est vide (votre composant doit pouvoir utiliser ce prop className et le transmettre à votre composant natif <input /> )

class InputGroup extends React.Component {
  // code

  render () {
    return(
      // code
      <input
        value={this.props.value}
        className={!this.state.password.length ? '' : 'red-border'}
        />
    );
  }
};

Bien qu'il puisse être préférable de conserver ce genre de chose à l'intérieur de votre composant InputGroup , limitant ainsi la logique de votre composant à un seul fichier

<InputGroup
  placeholder="Enter your password...*"
  name="password"
  className={!this.state.password.length ? '' : 'red-border'}
  value={this.state.password}
  onChange={this.handleChange}
  />

4 commentaires

Avez-vous créé la classe CSS? Il est également important que votre composant InputGroup sache comment transmettre ce nom de classe à son composant natif d' input interne. Pouvez-vous également publier le code de votre composant ÌnputGroup`?

Ce fil pourrait également vous aider: stackoverflow.com/questions/30533171/...

Saraband Je veux mettre en évidence en cliquant sur le bouton si le champ est vide mais il met déjà en évidence s'il est vide

S'il vous plaît donnez-moi une solution J'ai besoin d'aide lorsque je clique sur le bouton et que le champ est vide, alors je veux mettre en évidence avec une bordure de couleur rouge pas vide surligner le temps cliquez sur le bouton veuillez me donner la solution

2
votes

Une solution, comme l'a indiqué @Saraband, consiste à modifier le nom de classe de votre nœud selon que votre champ de saisie contient ou non une erreur:

<input type='text' required/>

Vous pouvez ensuite l'utiliser avec le CSS suivant qui affichera une bordure rouge (par exemple):

.error input
{
    border-bottom: 1px solid #eb516d;
}

Une autre façon consiste à utiliser l'attribut natif required de la balise d' input , mais cette méthode est difficile à personnaliser:

<InputGroup
  placeholder="Enter your password...*"
  name="password"
  className={this.state.password.length ? '' : 'error'}
  value={this.state.password}
  onChange={this.handleChange}
  />

https://www.w3schools.com/tags/att_input_required.asp

1 commentaires

Je veux mettre en évidence lorsque le champ de clic sur le bouton est vide mais il est déjà mis en évidence s'il est vide

0
votes

Pour ceux qui pourraient être à la recherche d'une solution à cette question, la solution ci-dessous ne sera validée qu'une fois le bouton d'envoi cliqué. Vous pouvez ajouter une classe css personnalisée pour styliser la balise d'entrée.

import React, { useState } from 'react';

const ValidateInput = () => {
  // set isSubmitting to false by default
  // this will make sure error class is not added by default
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const submitHandler = (event) => {
    event.preventDefault();
    // this will trigger the error validation
    setIsSubmitting(true);
    // add the rest of the logic here
  };
  return (
    <form onSubmit={submitHandler}>
      <input
        value={inputValue}
        onChange={(event) => {
          setInputValue(event.target.value);
        }}
        className={isSubmitting && !inputValue ? 'error' : undefined}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default ValidateInput;

0 commentaires