admin管理员组文章数量:1316664
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
2 Answers
Reset to default 5You 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;````
本文标签: javascriptReact ant design form validation not working (on submit)Stack Overflow
版权声明:本文标题:javascript - React ant design form validation not working (on submit) - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742006954a2412150.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论