React Bootstrap 无法验证表单

Question

我正在尝试向我的 React + Bootstrap 项目添加一些验证，但我无法实现这一点。根据Bootstrap Form 验证文档，我必须Form.Control.Feedback为 Form Group 组件提供一个组件。

但没有显示错误，而是检查标记，就像一切都很好。我创建了这个代码沙箱，展示了我需要实现的目标以及向我展示的内容：

为了以防万一，如果您不需要沙箱来查看错误，则这是代码：

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

那么，我做错了什么？

Answer 1

确保您已将错误的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"
   />