Comment ajouter une validation dans le produit Add Form C- React component

Question

Je fais un formulaire pour ajouter un produit à Firebase, mais à chaque clic sur le bouton Soumettre, même s'il contient déjà des données ou non, il peut toujours être ajouté dans Firebase. Je voudrais ajouter une validation à ce cas. Comment pourrais-je faire ça. Je voudrais que toutes les entrées de fichiers ne puissent pas être laissées en blanc et que le fichier texte est toujours du texte et non le numéro

const ProductForm = ({
  products,
  createProductRequest,
  fetchProductRequest,
  loading,
  type }) => {

  const [values, setValues] = useState({
    image: "",
    name: "",
    price: 0,
    description: "",
    categoty: "",
  });

  const [imageAsFile, setImageAsFile] = useState();

  useEffect(() => {
    if (Object.keys(products).length) {
      setValues(products);
    }
  }, [products]);

  useEffect(() => {
    if (type === "CREATE_PRODUCT_SUCCESS") {
      fetchProductRequest();
    }
  }, [fetchProductRequest, type]);

  const handleInputChange = (event) => {
    // Create new product to update
    const newPropdudct = {
      ...values,
      [event.target.name]: event.target.value,
    };
    // Update new product for value
    setValues(newPropdudct);
  };

  const handleFileChange = (event) => {
    const image = event.target.files[0]
    setImageAsFile(imageAsFile => (image))
    console.log(image);
  }


  const onSave = () => {
    createProductRequest(values, imageAsFile);
  };

  if (loading) {
    return (
      <Container>
        <Loading />
      </Container>
    );
  }

  return (
    <Container className="product-form">
      <Form>
        <Form.Group>
          <Form.Group>
            <Form.File
              id="image"
              label="Image choose"
              value={values.image.name}
              onChange={handleFileChange}
            />
          </Form.Group>
        </Form.Group>

        <Form.Group controlId="name">
          <Form.Label>Name</Form.Label>
          <Form.Control
            type="text"
            placeholder="Enter product name"
            value={values.name}
            name="name"
            onChange={handleInputChange}
          >
          </Form.Control>
        </Form.Group>

        <Form.Group controlId="categories">
          <Form.Label>Categories</Form.Label>
          <Form.Control
            as="select"
            name="category"
            value={values.category}
            onChange={handleInputChange}
          >
            {CATEGORIES.map((category, index) => (
              <option key={index}>{category.name}</option>
            ))}
          </Form.Control>
        </Form.Group>

        <Form.Group controlId="price">
          <Form.Label>Price</Form.Label>
          <Form.Control
            type="number"
            placeholder="Enter product price"
            value={values.price}
            name="price"
            onChange={handleInputChange}
          />
        </Form.Group>

        <Form.Group controlId="description">
          <Form.Label>Description</Form.Label>
          <Form.Control
            as="textarea"
            rows="3"
            name="description"
            value={values.description}
            onChange={handleInputChange}
          />
        </Form.Group>

        <Button btnText="Submit" size="btn-md" handleClick={onSave} />
      </Form>
    </Container>
  );
};

export default ProductForm;

Answer 1

Vous pouvez commencer par ajouter l' requiredattribut à chaque contrôle de formulaire pour la validation HMTL5 de base.

Pour une logique de validation plus avancée, vous pouvez avoir ceci comme onSavecontenu:

const onSave = (event) => {
    let invalid = [];
    ['name', 'description', 'category'].forEach(key => {
        if (values[key].match(/[0-9]+/))
            invalid.push(key);
    });
    
    if (values.name.trim() === '') 
        invalid.push('name');
    
    if (invalid.length !== 0) {
        event.preventDefault();
        // Whatever you want to do when the content is invalid
    } else {
        createProductRequest(values, imageAsFile);
    }
};

Avec cet extrait de code, vous avez les champs non valides dans la variable de tableau non valide. Vous pouvez également personnaliser la logique de validation.