React 表单中的必填字段不需要文本输入

Question

我有一个订阅对话框表单。我希望电子邮件字段是必需的，但我目前可以提交带有空白电子邮件地址的表单（这对客户来说是个大问题！）。我在我的代码中将其标记为必需，但这似乎并没有转化为我的 UI.

我正在使用 Material UI 进行样式设置。

真诚感谢任何指点:)

在图中，看看我是如何在没有电子邮件地址的情况下点击订阅的（点击订阅后出现提交消息）。

import React from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Grid from '@material-ui/core/Grid';
import { Typography } from '@material-ui/core';
import { Form } from 'react-final-form';


const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    padding: theme.spacing(2)
  },
  divider: {
    marginBottom: theme.spacing(2)
  }
}));

export default function SubscribeFormResults() {

  const classes = useStyles();

  const [open, setOpen] = React.useState(false);
  const [formSubmitted, setFormSubmitted] = React.useState(false);

  const onSubmit = async values => {
    console.log('Submitting subscribe form!');
    console.log('Subscribe form values:', values);
  
    setFormSubmitted(true);
  };

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
    setFormSubmitted(false);
  };

  const validate = values => {
    const errors = {};
    if (!values.userEmail) {
      errors.userEmail = 'Required';
    }
    return errors;
  };

  return (
    <div>
      <Button size="small" color="primary" onClick={handleClickOpen}>
        Subscribe
      </Button>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
          <DialogContent>
            <Form
            onSubmit={onSubmit}
            initialValues={{ userEmail: 'johndoe@example.com', arn: 'Connect to Backend!' }}
            validate={validate}
            render={({ handleSubmit, form, submitting, pristine, values }) => (
              <form onSubmit={handleSubmit} noValidate>

                <DialogContentText>
                  To subscribe to this website, please enter your email address here. We will send updates
                  occasionally.
                </DialogContentText>

                <TextField
                  label="Email Address"
                  name="userEmail"
                  margin="none"
                  required={true}
                  fullWidth
                />

                {formSubmitted && <Grid item xs={12}>
                  <Typography name='submitMessage' variant='subtitle1'>You have subscribed to AA-01-23-45-678901-2. {/* Connect to backend here */}</Typography>
                </Grid>}

                <DialogActions>
                  <Button /* onClick={handleClose} */ color="primary" type="submit" disabled={submitting}>
                    Subscribe
                  </Button>
                  <Button onClick={handleClose} color="primary">
                    Close
                  </Button>
                </DialogActions>

              </form>
              )}
            />
          </DialogContent>
      </Dialog>
    </div>
  );
}

Answer 1

对于未来的读者，我通过从 Material UI 大写表单标签中删除验证参数并使用标准的小写表单标签强制验证来解决此问题。

React 表单中的必填字段不需要文本输入

Required Field in React Form not Requiring Text Entry

forms

required

reactjs

material-ui