Como adicionar validação no componente Form c-react do produto add

Question

Estou fazendo Formulário para adicionar produto ao firebase, mas a cada clique no botão enviar, embora já tenha dados ou não, ainda pode adicionar no Firebase. Eu gostaria de adicionar validação a este caso. Como eu poderia fazer isso. Eu gostaria que todas as entradas de arquivo não pudessem ser deixadas em branco, e arquivo de texto é sempre texto e não número

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

Você pode começar adicionando o requiredatributo a cada controle de formulário para validação básica do HMTL5.

Para uma lógica de validação mais avançada, você pode ter isso como seu onSaveconteúdo:

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);
    }
};

Com este snippet, você tem os campos inválidos na variável de matriz inválida. Você também pode personalizar a lógica de validação.