React Bootstrap не может проверить формы - PullRequest
Новая
       5

React Bootstrap не может проверить формы

0 голосов
/ 10 апреля 2020

Я пытаюсь добавить подтверждение в свой проект React + Bootstrap, но не могу этого добиться. В соответствии с Bootstrap документацией проверки формы Я должен предоставить компонент Form.Control.Feedback для компонента группы форм.

Но не показывает ошибки, но ставит галочки, как будто все в порядке. Я создал эту песочницу кода, чтобы продемонстрировать, чего мне нужно достичь и что мне показывает:

Edit magical-mcclintock-rnthy

И на всякий случай, это код, если вы мне не нужна песочница, чтобы увидеть ошибку: 

import React, { useState } from "react";
import "./styles.css";
import { Container, Form, Button } from "react-bootstrap";
import validator from "validator";
import empty from "is-empty";

export default function App() {
  const [validated, setValidated] = useState(false);
  const [errors, setErrors] = useState({});
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = async e => {
    e.preventDefault();

    const errors = {};

    // validation
    if (!validator.isMobilePhone(phone, ["es-UY"])) {
      errors.phone = "Invalid phone number";
    }

    if (!validator.isEmail(email)) {
      errors.email = "Invalid email address";
    }

    if (!empty(errors)) {
      setErrors(errors);
    }

    setValidated(true);
  };

  return (
    <Container>
      <Form validated={validated} onSubmit={handleSubmit}>
        <h1>Test form</h1>
        <Form.Group controlId="phone">
          <Form.Label>Phone number</Form.Label>
          <Form.Control
            type="tel"
            value={phone}
            onChange={e => setPhone(e.target.value)}
          />
          <Form.Control.Feedback type="invalid">Error</Form.Control.Feedback>
          {errors.phone && (
            <Form.Control.Feedback type="invalid">
              {errors.phone}
            </Form.Control.Feedback>
          )}
        </Form.Group>
        <Form.Group controlId="email">
          <Form.Label>Email address</Form.Label>
          <Form.Control
            type="email"
            value={email}
            onChange={e => setEmail(e.target.value)}
            feedback="Error"
          />
          {errors.email && (
            <Form.Control.Feedback type="invalid">
              {errors.email}
            </Form.Control.Feedback>
          )}
        </Form.Group>
        <Form.Group controld="submit">
          <Button type="submit" variant="primary">
            Submit
          </Button>
          <Button
            type="reset"
            variant="info"
            style={{ marginLeft: 10 }}
            onClick={() => {
              setErrors({});
              setValidated(false);
            }}
          >
            Reset
          </Button>
        </Form.Group>
      </Form>
    </Container>
  );
}

Итак, что я делаю не так?

1 Ответ

0 голосов
/ 10 апреля 2020

Убедитесь, что вы установили setValidated как false для ошибок 

const handleSubmit = async e => {
    e.preventDefault();

    const allErrors = {};  <--- changed this as well

    // validation
    if (!validator.isMobilePhone(phone, ["es-UY"])) {
      allErrors.phone = "Invalid phone number";
    }

    if (!validator.isEmail(email)) {
      allErrors.email = "Invalid email address";
    }

    if (!empty(allErrors)) {
      setErrors(allErrors);
      setValidated(false);
    }
    else {
      setValidated(true);
    }
  };

В своем поле добавьте isInvalid как реквизиты: 

<Form.Control
   type="tel"
   value={phone}
   isInvalid={!!errors.phone}   <------
   onChange={e => setPhone(e.target.value)}
 />

  <Form.Control
    type="text"
    value={email}
    isInvalid={!!errors.email}  <-----
    onChange={e => setEmail(e.target.value)}
    feedback="Error"
   />
...