i'm using next js
const [form] = Form.useForm();
const onFinishFailed = ({ values }) => {
console.log("email-status",form.isFieldValidating('email'),form.getFieldsError())
console.log("failed",values);
};
<Form
{...layout}
layout="vertical"
name="basic"
form = {form}
initialValues={{ email: "",password: "",remember: true,}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
name="email"
label="E-mail"
rules={[
{
type: 'email',
message: 'The input is not valid E-mail!',
},
{
required: true,
message: 'Please input your E-mail!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="password"
label="Password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item >
<Button type="primary" htmlType="submit">
Register
</Button>
</Form.Item>
Now when I type a valid email and doesn't enter a password and click on Register button
a) I'm getting 'Please input your password!',and not getting any error displayed under email input box // which is expected
b) Since i haven't entered any password on clicking the registered button
"onFinishFailed " function is being executed // so far so good
c) But in console I'm getting the output as
email-status, false, []
It should be email-status , true, [ ] right...
Related
The task is as follows, when you press the LOGIN button, a request is sent to the server with a password and login, if they are incorrect, then under the password entry line you need to display the corresponding error and all input fields should be highlighted in red.
How can you achieve this?
I tried to do it for a very long time using built-in validators in Form.Item . So, since I don't need to worry about changing the color of input fields, the validator does it itself, but I got confused about these validators and I got an infinite loop.
Here is some of the code for the Login page.
export const LoginPage = () => {
const { dispatch } = useAuthContext()
const onFinish = (values: any) => {
APIs.requestLogin(values.username, values.password, false)
.then((response: any) => {
dispatch({ type: SIGN_IN, payload: response.data })
})
.catch(() => {
console.log('error')
})
}
return (
<div className={classes.root}>
<div className={classes.container}>
<Form
className={classes.form_container}
name="normal_login"
initialValues={{ remember: true }}
onFinish={onFinish}
>
<Form.Item
className={classes.form_input}
name="username"
rules={[{ required: true, message: 'Please enter your username!' }]}
>
<Input
autoFocus={true}
className={classes.input_style}
placeholder="Username"
prefix={<UserOutlined className="site-form-item-icon" />}
/>
</Form.Item>
<Form.Item
className={classes.form_input}
name="password"
rules={[{ required: true, message: 'Please enter your password!' }]}
>
<Input.Password className={classes.input_style} placeholder="Password" prefix={<LockOutlined />} />
</Form.Item>
<Form.Item className={classes.form_submit}>
<Button className={classes.form_button_submit} type="primary" htmlType="submit">
LOGIN
</Button>
</Form.Item>
</Form>
<div className={classes.image} />
</div>
</div>
)
}
How to get the error message from the validator and show it in the form? I have 2 types of errors: "Please enter password" - if the field is empty and "Incorrect password" - when the password does not match. How to realize this?
export const LoginPage = ({ startLogin }) => (
<div>
<Form
name="normal_login"
initialValues={{ remember: true }}
onFinish={startLogin}
validateTrigger='onSubmit'
>
///////////////////////////////////THE CORE PART////////////////////////////////////////
<Form.Item
name="password"
rules={[{ required: true, message: 'Please enter password!' }, ({ getFieldValue }) => ({
//WHY THE MESSAGE ABOVE IS NOT SHOWN AT ALL?
validator(_, value) {
axios.get('users.json').then(({ data }) => {
if (condition) //do smth.
else if (condition) {
throw new Error("Incorrect password"); //<-- HOW TO SHOW THIS
}
});
}).catch(e => {console.log(e); return e});
},
}),]}
>
/////////////////////////////////////////////////////////////////////////////////////////
<Input.Password
className="input"
iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button">
Log in
</Button>
</Form.Item>
</Form>
</div>
);```
I am trying to validate the form input field with decimal values, if the entered value is not number or decimal it should show error message, so far I have tried the below code example which is not validating characters and special character.
I would like to show error message when user enters, any other character than number and decimal
function position() {
const { dispatch } = useContext(store);
const [isDisable, setCheckBoxDisable] = useState(false)
const onApply = (values) => {
console.log('Success:', values);
dispatch({
type: "updateGPSCoordinates",
latitude: values.latitude,
longitude: values.longitude,
altitude: values.altitude
});
};
return (
<div>
<div className="homepage-widget-header">
<Form
{...layout}
className="gps-coordinates-form"
onFinish={onApply}
>
<Form.Item
label={GpsConstants.LATITUDE}
name="latitude"
initialValue="25.328380"
rules={[
{
required: true,
message: 'Please enter latitude!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={GpsConstants.LONGITUDE}
name="longitude"
initialValue="51.435989"
rules={[
{
required: true,
message: 'Please enter longitude!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label={GpsConstants.ALTITUDE}
name="altitude"
initialValue="0.0"
rules={[
{
required: true,
message: 'Please enter altitude!',
},
]}
>
<Input />
</Form.Item>
</div>
</div>
)
}
export default GPSPosition
Thanks in advance
Appreciate quick help
I am using antd forms and rules and when im submiting a form i get warnings like:
async-validator: ["Please enter username"].
I tried { suppressWarning: true } but it didn't work, the warning is not the same text in the rule its the default template text
antd: ^4.6.4
<Form
{...layout}
name="basic"
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: 'Please input your username!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout} name="remember" valuePropName="checked">
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
As described on the async-validator page (https://github.com/yiminghe/async-validator)
At the entry point to your app you can do the following to disable the warning messages.
import Schema from 'async-validator';
Schema.warning = function(){};
For antd >4.20.0, use the following line in the App.jsx, after last import instruction...
global.ASYNC_VALIDATOR_NO_WARNING = 1;
I'm trying to do a "field 2 does not match field 1" thing here (i.e. "passwords do not match).
There isn't much documentation on the available rules for the antd forms. They point at this project here.
Below is my current form:
const ResetPasswordForm = Form.create()(React.createClass({
getInitialState () {
return {
loading: false
};
},
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (err) {
failure();
}
if (!err) {
let newPassword = values.newPassword;
let repeatNewPassword = values.repeatNewPassword;
handleResetPassword(newPassword, repeatNewPassword, this.props.token);
}
});
},
render() {
const { getFieldDecorator } = this.props.form;
const newPasswordRules = [
{ required: true, message: 'Please input a new password!' }
];
const repeatNewPassword = [
{ required: true, message: 'Please repeat the new password!' }
];
return (
<Form onSubmit={this.handleSubmit} className="login-form">
<FormItem>
{getFieldDecorator('newPassword', { rules: newPasswordRules })(
<Input addonBefore={<Icon type="lock" />} type="password" placeholder="New password" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('repeatNewPassword', { rules: repeatNewPassword })(
<Input addonBefore={<Icon type="lock" />} type="password" placeholder="Repeat new password" />
)}
</FormItem>
<FormItem>
<Button loading={this.state.loading} type="primary" htmlType="submit" className={css(styles.loginButton)}>
Reset Password
</Button>
</FormItem>
</Form>
);
}
}));
If anyone can point me in the right direction for creating a rule that checks that the first field value matches the second, that'd be awesome!
You can find it in this register form demo: https://ant.design/components/form/#components-form-demo-register
Please, follow these lines:
<Form.Item
name="password"
label="Password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
hasFeedback
>
<Input.Password />
</Form.Item>
<Form.Item
name="confirm"
label="Confirm Password"
dependencies={['password']}
hasFeedback
rules={[
{
required: true,
message: 'Please confirm your password!',
},
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject('The two passwords that you entered do not match!');
},
}),
]}
>
<Input.Password />
</Form.Item>