最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React ant design form validation not working (on submit) - Stack Overflow

programmeradmin5浏览0评论

When i press submit and if there is nothing filled in email/password a message should appear beneath them saying email/password is required but its not happnening

Code Sandbox Link: =/src/App.js:0-1221

import './App.css';
import {Button, Form, Input, Checkbox} from 'antd'
import 'antd/dist/antd.css';

function App() {
  return (
    <div className="App">
      
  <Form
      name="basic"
      initialValues={{
        remember: true,
      }}
    >
      <h1 className="Title">Sign Up</h1>
      <h2 className="Text">Enter Email :</h2>
      <Form.Item
        rules={[
          {
            required: true,
            message: 'Please input your email!',
          },
        ]}
      >
        <Input placeholder="Enter Email" />
      </Form.Item>
      <h2 className="Text">Enter Password :</h2>
      <Form.Item
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password placeholder="Enter Password" />
      </Form.Item>

      <Form.Item  name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item >
        <div className="Button">
        <Button type="primary" htmlType="submit" size="medium">
          Submit
        </Button>
        </div>
      </Form.Item>
    </Form>
    </div>
  );
}

export default App;```

When i press submit and if there is nothing filled in email/password a message should appear beneath them saying email/password is required but its not happnening

Code Sandbox Link: https://codesandbox.io/s/gracious-hypatia-ieepw?file=/src/App.js:0-1221

import './App.css';
import {Button, Form, Input, Checkbox} from 'antd'
import 'antd/dist/antd.css';

function App() {
  return (
    <div className="App">
      
  <Form
      name="basic"
      initialValues={{
        remember: true,
      }}
    >
      <h1 className="Title">Sign Up</h1>
      <h2 className="Text">Enter Email :</h2>
      <Form.Item
        rules={[
          {
            required: true,
            message: 'Please input your email!',
          },
        ]}
      >
        <Input placeholder="Enter Email" />
      </Form.Item>
      <h2 className="Text">Enter Password :</h2>
      <Form.Item
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password placeholder="Enter Password" />
      </Form.Item>

      <Form.Item  name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item >
        <div className="Button">
        <Button type="primary" htmlType="submit" size="medium">
          Submit
        </Button>
        </div>
      </Form.Item>
    </Form>
    </div>
  );
}

export default App;```

Share Improve this question asked Apr 3, 2021 at 12:50 Austin PlayzAustin Playz 331 silver badge3 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

You need to specify name property for your Form.Item ponents. The antd form utilities work with name. So, because you haven't defined name for your text input fields, it can not validate or read its value. You should change your Form.Item like this:

      <Form.Item
        name="email"
        rules={[
          {
            required: true,
            message: 'Please input your email!',
          },
        ]}
      >
        <Input placeholder="Enter Email" />
      </Form.Item>

      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password placeholder="Enter Password" />
      </Form.Item>

I know my response is late, but I hope it will help someone else. I actually had the same problem a couple of days ago, but my problem was that I had a called method in a Button and not in the Form. And your problem is also that you didn't specify the name properties.

So, first you have to create a method and call it in the Form tag and then you have to specify the name property for each Form.Item ponent. That will look like this:

import {Button, Form, Input, Checkbox} from 'antd'
import 'antd/dist/antd.css';

function App() {
const [form] = Form.useForm();
const onFinish = (values) => {
    console.log(form.getFieldsValue());
    console.log('Success:', values);
    form.validateFields();
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div className="App">
      
  <Form form={form}
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
    >
      <h1 className="Title">Sign Up</h1>
      <h2 className="Text">Enter Email :</h2>
      <Form.Item
        name="email"
        rules={[
          {
            required: true,
            message: 'Please input your email!',
          },
        ]}
      >
        <Input placeholder="Enter Email" />
      </Form.Item>
      <h2 className="Text">Enter Password :</h2>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password placeholder="Enter Password" />
      </Form.Item>

      <Form.Item  name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item >
        <div className="Button">
        <Button type="primary" htmlType="submit" size="medium">
          Submit
        </Button>
        </div>
      </Form.Item>
    </Form>
    </div>
  );
}

export default App;````
发布评论

评论列表(0)

  1. 暂无评论