react-hook-form do not send PasswordConfirm - reactjs

Hello guys I'm using react-hook-form library
it's really awesome library for me !
but I have some problem at this time
I don't want to send pwdConfirm value, cuz this value gets me 400 erros,
so How can I send values without pwdConfirm ?
I just only want to send id , pwd , nickname !
const dispatch = useDispatch();
const { register, watch, errors, handleSubmit } = useForm();
const password = useRef();
password.current = watch('password');
const type = 'normal';
const onSubmit = (data) => {
console.log(data);
dispatch(signUpRequest(data));
};
useEffect(() => {});
return (
<>
<form
onSubmit={handleSubmit(onSubmit)}
className={styles.signup__form}
>
<label>email</label>
<input
name="email"
type="text"
ref={register({ required: true, pattern: /^\S+#\S+$/i })}
placeholder=""
/>
{errors.email && (
<p className={styles.error__message}>
incorrect email
</p>
)}
<label>password</label>
<input
name="password"
type="password"
ref={register({ required: true, minLength: 6 })}
placeholder=""
/>
{errors.password && errors.password.type === 'required' && (
<p className={styles.error__message}>
password plz
</p>
)}
{errors.password && errors.password.type === 'minLength' && (
<p className={styles.error__message}>
at least 6character
</p>
)}
<label>password confirm </label>
<input
type="password"
name="pwdConfirm"
ref={register({
required: true,
validate: (value) => value === password.current,
})}
placeholder=""
/>
{errors.pwdConfirm && errors.pwdConfirm.type === 'required' && (
<p className={styles.error__message}>
check your password
</p>
)}
{errors.pwdConfirm && errors.pwdConfirm.type === 'validate' && (
<p className={styles.error__message}>
not correct your password
</p>
)}

I have used the delete operator of javascript to remove pwdConfirm key from an existing object.
const onSubmit = (data) => {
delete data.pwdConfirm
console.log(data);
dispatch(signUpRequest(data));
};

Related

Warning "Please enter 8 characters" and "Both passwords should match" pops up already as soon as started typing

I want to notify that " both passwords should match" and "Please enter 8 characters" after typing is it possible?
Also an existing issue after entering with less than 8 characters password it will notify "please enter 8 characters" and still proceed to reset password. Can anyone discuss it to me how to prevent it and how to notify the warnings after finished typing?
useEffect(() => {
if (forgetSuccess) {
notify("success", "Password changed successfully");
history.push("/login");
}
if (forgetError) {
notify("error", forgetError);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props]);
const handlePassword = (e) => {
setPassword(e.target.value)
var minimumPass = 8
var newPass = e.target.value
if (newPass.length < minimumPass) {
setError("Password should have atleast 8 characters");
}else{
setError('')
}
};
const handleConfirmPassword = (e) => {
setConfirmPassword(e.target.value);
if (password !== e.target.value) {
setError("Both Passwords should match");
} else if (e.target.value.length < 8) {
setError("Password should have atleast 8 characters");
}else{
setError("")
}
};
const handleSubmit = (e) => {
e.preventDefault()
if (password && password === confirm_password) {
if (resetPassword) resetPassword(secret, password);
}
};
return (
<div className={styles.root}>
<div className={styles.left_side}>
<Link to="/">
<div className={styles.logo_container}>
<img src={logo} alt="logo" className={styles.logo} />
<picture>
<source srcSet={AutopilotWhite} media="(prefers-color-scheme: dark)" />
<img alt="autopilot" src={Autopilot} />
</picture>
</div>
</Link>
<p className={styles.forgot_text}>Reset Your Password</p>
<p className={styles.forgot_message}>Set your new password and confirm it</p>
<p className={styles.error_message}>{error} </p>
{errorValidation && (
<Alert severity="error" style={{ width: "400px", marginBottom: "20px" }}>
{errorValidation}
</Alert>
)}
<form onSubmit={handleSubmit} className={styles.form}>
<input type="password" placeholder="Enter Password" className={styles.email_address} value={password} onChange={(e) => handlePassword(e)} />
<br />
<br />
<input type="password" placeholder="Confirm Your Password" className={styles.email_address} value={confirm_password} onChange={(e) => handleConfirmPassword(e)} />
<Button type="submit" className={`${styles.forgot_button} ${loading && styles.forgot_button_disabled}`} onClick={handleSubmit}>
{loading !== true ? <span>Save Password</span> : <span>Processing...</span>}
</Button>
</form>
</div>
<div className={styles.right_side}>
<Slider />
</div>
</div>
);
};
This could be yoour solution to use debounce library, till wait user to write complete inside input tag,
npm i use-debounce --save
import statements are,
import { useDebounce } from 'use-debounce';
const [valuePassword] = useDebounce(password, 1000);
const [valueConfirmPassword] = useDebounce(confirmPassword, 1000);
then change your html return code to this,
<form onSubmit={handleSubmit} className={styles.form}>
<input type="password" placeholder="Enter Password" className={styles.email_address} value={valuePassword} onChange={(e) => handlePassword(e)} />
<br />
<br />
<input type="password" placeholder="Confirm Your Password" className={styles.email_address} value={valueConfirmPassword} onChange={(e) => handleConfirmPassword(e)} />
<Button type="submit" className={`${styles.forgot_button} ${loading && styles.forgot_button_disabled}`} onClick={handleSubmit}>
{loading !== true ? <span>Save Password</span> : <span>Processing...</span>}
</Button>
</form>
and then you can change functions to, let them use debounce value
const handlePassword = (e) => {
setPassword(e.target.value)
var minimumPass = 8
var newPass = e.target.value
if (newPass.length < minimumPass) {
setError("Password should have atleast 8 characters");
}else{
setError('')
}
};
const handleConfirmPassword = (e) => {
setConfirmPassword(e.target.value);
if (valuePassword !== e.target.value) {
setError("Both Passwords should match");
} else if (e.target.value.length < 8) {
setError("Password should have atleast 8 characters");
}else{
setError("")
}
};

React radio not resetting the values

I am new to reactjs. I have radio buttons that say UserA, UserB, UserC, and User D. I have multiple permission for UserA based on sub-selection of radio buttons(Like Admin, Editor, User). Similarly, for UserD I can have only one permission like SuperAdmin. Whenever I select UserD, it should set the permission to 'Super Admin' which is working. But If I select another radio button, User D is not unselecting.
I believe it is because I am using the name as 'permission' on both the input fields(User D and UserA Admin sub option) which is not resetting the values in the state.
Here is the codepen for your reference. Any help would be much appreciated.
Thank you
You must have all input[radio-button]'s structure similar. You must be updating the state based on a condition. This code worked for me based on the given requirement. I have made some minor changes to the input userD and setState method. I hope this resolves your problem.
export default function Form() {
const [state, setState] = React.useState({
user: '',
testRequest: false,
permission: ''
});
const [disableuserA, setdisableuserA] = React.useState(false);
const [value, setValue] = React.useState(0);
const [selected, setSelected] = React.useState('');
function handleChange(e) {
const value =
e.target.type === 'checkbox' ? e.target.checked : e.target.value;
setState({
...state,
[e.target.name]: value,
...(e.target.name == 'user' &&
e.target.value == 'userD' && { permission: 'superAdmin' })
});
setSelected(e.target.value);
}
return (
<div className="app">
<form onSubmit={handleFormSubmit}>
<div>
<div>
<input
type="checkbox"
name="testRequest"
value={value}
onClick={() => setdisableuserA(!disableuserA)}
checked={state.testRequest}
onChange={handleChange}
/>
Enable this to hide the User A option
</div>
<div className="heading">user</div> <br />
<input
disabled={disableuserA}
type="radio"
name="user"
value="userA"
checked={selected === 'userA' || selected === 'admin'}
onChange={handleChange}
/>
UserA
<input
type="radio"
name="user"
value="userB"
checked={state.user === 'userB'}
onChange={handleChange}
/>
UserB
<input
type="radio"
name="user"
value="userC"
checked={state.user === 'userC'}
onChange={handleChange}
/>
UserC
<input
type="radio"
name="user"
value="userD"
checked={state.user === 'userD'}
onChange={handleChange}
/>
UserD
<br /> <hr />
<div
aria-hidden={
selected !== 'userA' &&
selected !== 'admin' &&
selected !== 'editor' &&
selected !== 'publisher'
? true
: false
}
>
<input
type="radio"
name="permission"
value="admin"
checked={state.permission === 'admin'}
onChange={handleChange}
/>{' '}
Admin
<input
type="radio"
name="permission"
value="editor"
checked={state.permission === 'editor'}
onChange={handleChange}
/>{' '}
Editor
<input
type="radio"
name="permission"
value="publisher"
checked={state.permission === 'publisher'}
onChange={handleChange}
/>{' '}
Publisher
</div>
<br /> <br />
<button type="submit" className="btn-default btn">
Submit{' '}
</button>
</div>
</form>
<pre>{JSON.stringify(state, null, 3)}</pre>
</div>
);
}
Live Demo

clear controlled components in a form using react after clicking submit button

I have created a form to enter name, email, website and message. After entering the details using submit button I want to reset all the fields. I don't know how to use control component. Please help..
This is how I enter Input fields.
export default ({
noLabels = false,
margin = "",
small = false,
blueButton = false,
buttonLabel = null,
quickContact = false,
subject = "New message from website",
}) => {
const [name, setName] = useState(
process.env.NODE_ENV === "development" ? "abc" : ""
)
const [email, setEmail] = useState(
process.env.NODE_ENV === "development" ? "abc#blabla.io" : ""
)
const [phone, setPhone] = useState(
process.env.NODE_ENV === "development" ? "Phone" : ""
)
const [country, setCountry] = useState(
process.env.NODE_ENV === "development" ? "Country" : ""
)
const [message, setMessage] = useState(
process.env.NODE_ENV === "development" ? "Message" : ""
)
const [website, setWebsite] = useState(
process.env.NODE_ENV === "development" ? "abc.io" : ""
)
const handleSubmit = e => {
e.preventDefault()
var formData = new FormData()
formData.set("name", name)
formData.set("email", email)
formData.set("phone", phone)
formData.set("country", country)
formData.set("message", message)
formData.set("website", website)
formData.set("subject", subject)
api
.contact(formData)
.then(res => {
if (typeof window !== "undefined") {
const uikit = require("uikit")
uikit
.toggle(
document.getElementById(
quickContact
? "form_success_message_quick"
: "form_success_message"
)
)
.toggle()
}
})
.catch(error => {
if (typeof window !== "undefined") {
const uikit = require("uikit")
uikit
.toggle(
document.getElementById(
quickContact ? "form_error_message_quick" :
"form_error_message"
)
)
.toggle()
}
})
}
return (
<form
action="/send-mail.php"
className="uk-form contact_form"
method="post"
onSubmit={handleSubmit}
>
<div
className="uk-alert-primary contact-form-success-quick"
data-uk-alert
id={
quickContact ? "form_success_message_quick" :
"form_success_message"
}
hidden
>
<a className="uk-alert-close" data-uk-close></a>
<p>
Thank you for contacting us. We will get in touch with you
shortly.
</p>
</div>
<div
className="uk-alert-primary contact-form-error-quick"
data-uk-alert
id={quickContact ? "form_error_message_quick" : "form_error_message"}
hidden>
<a className="uk-alert-close" data-uk-close></a>
<p>
Thank you for contacting us. We will get in touch with you shortly.
</p>
</div>
<div
className={`uk-grid ${
small || quickContact ? "uk-grid-small" : "uk-grid-medium"
}`}
>
<div className={quickContact ? "uk-width-1-3#s" : "uk-width-1-2#s"}>
<InputField
label="Name *"
value={name}
setValue={setName}
noLabels={noLabels}
margin={margin}
small={small}
/>
</div>
<div className={quickContact ? "uk-width-1-3#s" : "uk-width-1-2#s"}>
<InputField
label="Email *"
value={email}
setValue={setEmail}
noLabels={noLabels}
margin={margin}
small={small}
/>
</div>
{quickContact && (
<div className="uk-width-1-3#s">
<InputField
label="Website"
value={website}
setValue={setWebsite}
noLabels={noLabels}
margin={margin}
small={small}
/>
</div>
)}
{!quickContact && (
<div className="uk-width-1-2#s">
<InputField
label="Phone number *"
value={phone}
setValue={setPhone}
noLabels={noLabels}
margin={margin}
small={small}
/>
</div>
)}
{!quickContact && (
<div className="uk-width-1-2#s">
<InputField
label="Website"
value={website}
setValue={setWebsite}
noLabels={noLabels}
margin={margin}
small={small}
/>
</div>
)}
<div className="uk-width-1-1">
<InputField
label="Message *"
value={message}
setValue={setMessage}
textArea
noLabels={noLabels}
margin={margin}
small={small}
/>
</div>
<div className="uk-width-1-1 uk-text-center">
<button
type="submit"
className={`uk-button ${blueButton ? "blue" : "purple"}`}
value="Submit"
name="submit"
>
{buttonLabel ? buttonLabel : "Submit"}
</button>
</div>
</div>
</form>
)
}
const InputField = ({
noLabels,
value,
setValue,
label,
textArea = false,
margin,
small,
}) => {
<>
{textArea ? (
<textarea
placeholder={label}
className={`uk-textarea custom-margin-${
margin ? margin + "-" : ""
}bottom ${!small && "uk-form-large"}`}
cols="30"
rows="6"
required
value={value}
onChange={e => setValue(e.target.value)}
></textarea>
) : (
<input
type="text"
className={`uk-input custom-margin-${
margin ? margin + "-" : ""
}bottom ${!small && "uk-form-large"}`}
placeholder={label}
required
value={value}
onChange={e => setValue(e.target.value)}
/>
)}
</>
I want to reset this code using "e.target.reset()" if possible.
Also the method how to use "setValue" would be great help.
Use a single useState hook to hold the values for the form to make it easier to set them all in a single call.
Don't manipulate the DOM directly—instead use state + React to declare the desired output given the current state.
Refactor multiple conditionals that are addressing the same concern into a single conditional (re: process.env.NODE_ENV)
Pass a callback to the state setter to modify the existing props rather than having to explicitly write the function to modify each input's value manually.
const devValues = {
name: "abc",
email: "abc#blabla.io",
phone: "Phone",
country: "Country",
message: "Message",
website: "abc.io",
}
const defaultValues = {
name: "",
email: "",
phone: "",
country: "",
message: "",
website: "",
}
export default ({
noLabels = false,
margin = "",
small = false,
blueButton = false,
buttonLabel = null,
quickContact = false,
subject = "New message from website",
}) => {
const [message, setMessage] = useState(null)
const [inputValues, setInputValues] = useState(
process.env.NODE_ENV === "development" ? devValues : defaultValues
)
const handleSubmit = (e) => {
e.preventDefault()
var formData = new FormData()
Object.entries(inputValues).forEach(([key, value]) => {
formData.set(key, value)
})
api
.contact(formData)
.then((res) => {
setMessage(
quickContact ? "form_success_message_quick" : "form_success_message"
)
// clear the input values here
setInputValues(defaultValues)
})
.catch((error) => {
setMessage(
quickContact ? "form_error_message_quick" : "form_error_message"
)
})
}
return (
<form
action="/send-mail.php"
className="uk-form contact_form"
method="post"
onSubmit={handleSubmit}
>
{message && (
<div
className={
message.startsWith("form_success_message")
? "uk-alert-primary contact-form-success-quick"
: "uk-alert-primary contact-form-error-quick"
}
data-uk-alert
>
<a className="uk-alert-close" data-uk-close></a>
<p>
Thank you for contacting us. We will get in touch with you shortly.
</p>
</div>
)}
<div
className={`uk-grid ${
small || quickContact ? "uk-grid-small" : "uk-grid-medium"
}`}
>
<div className={quickContact ? "uk-width-1-3#s" : "uk-width-1-2#s"}>
<InputField
label="Name *"
name="name"
value={inputValues.name}
setValue={setInputValues}
noLabels={noLabels}
margin={margin}
small={small}
/>
</div>
<div className={quickContact ? "uk-width-1-3#s" : "uk-width-1-2#s"}>
<InputField
label="Email *"
name="email"
value={inputValues.email}
setValue={setInputValues}
noLabels={noLabels}
margin={margin}
small={small}
/>
</div>
{quickContact && (
<div className="uk-width-1-3#s">
<InputField
label="Website"
name="website"
value={inputValues.website}
setValue={setInputValues}
noLabels={noLabels}
margin={margin}
small={small}
/>
</div>
)}
{!quickContact && (
<div className="uk-width-1-2#s">
<InputField
label="Phone number *"
name="phone"
value={inputValues.phone}
setValue={setInputValues}
noLabels={noLabels}
margin={margin}
small={small}
/>
</div>
)}
{!quickContact && (
<div className="uk-width-1-2#s">
<InputField
label="Website"
name="website"
value={inputValues.website}
setValue={setInputValues}
noLabels={noLabels}
margin={margin}
small={small}
/>
</div>
)}
<div className="uk-width-1-1">
<InputField
label="Message *"
name="message"
value={inputValues.message}
setValue={setInputValues}
textArea
noLabels={noLabels}
margin={margin}
small={small}
/>
</div>
<div className="uk-width-1-1 uk-text-center">
<button
type="submit"
className={`uk-button ${blueButton ? "blue" : "purple"}`}
value="Submit"
name="submit"
>
{buttonLabel ? buttonLabel : "Submit"}
</button>
</div>
</div>
</form>
)
}
const InputField = ({
name,
value,
setValue,
label,
textArea = false,
margin,
small,
}) => {
const onChange = (e) => {
const value = e.target.value
setValue((prev) => ({ ...prev, [name]: value }))
}
return textArea ? (
<textarea
placeholder={label}
className={`uk-textarea custom-margin-${
margin ? margin + "-" : ""
}bottom ${!small && "uk-form-large"}`}
cols="30"
rows="6"
required
value={value}
onChange={onChange}
/>
) : (
<input
type="text"
className={`uk-input custom-margin-${margin ? margin + "-" : ""}bottom ${
!small && "uk-form-large"
}`}
placeholder={label}
required
value={value}
onChange={onChange}
/>
)
}
Among the correct answer and especially the recommendations of #coreyward I want to add another approach that may help you or other users in the same trouble.
You can also use a useRef hook and ref, to your form tag and simply clear it with the native reset() function:
export default ({
noLabels = false,
margin = "",
small = false,
blueButton = false,
buttonLabel = null,
quickContact = false,
subject = "New message from website",
}) => {
const mailForm = useRef(null)
//... more code
}
return (
<form
action="/send-mail.php"
className="uk-form contact_form"
method="post"
onSubmit={handleSubmit}
ref={mailForm}
>
)
Then, in your submit function you have exposed a mailForm.current as your form. You can simply:
const handleSubmit = (e) => {
e.preventDefault()
var formData = new FormData()
Object.entries(inputValues).forEach(([key, value]) => {
formData.set(key, value)
})
api
.contact(formData)
.then((res) => {
setMessage(
quickContact ? "form_success_message_quick" : "form_success_message"
)
// clear the input values here
mailForm.curent.reset();
})
.catch((error) => {
setMessage(
quickContact ? "form_error_message_quick" : "form_error_message"
)
})
}

react hooks: remember me checkbox in Login form not working

I have a login form functional component built using react-hooks comprising of userid, password and rememberMe checkbox.
For some reason, the checkbox is not working as in, when I click on it, it does tick or untick. Which is basically its state is not changing.
userid, password and rememberMe checkbox needs to be sent to the backend. That's why I have to couple it with inputs. If it was an independent checkbox than it would have been easy.
I have handleChange() for userid, password and I have handleChechbox() for handling checkbox.
Below is the complete code.
const Login = (props) => {
const [inputs, setInputs] = useState({
userid: "",
password: "",
rememberPassword: false,
});
const [submitted, setSubmitted] = useState(false);
const { userid, password, rememberPassword } = inputs;
// reset login status
useEffect(() => {
dispatch(loginActions.logout());
}, []);
function handleChange(e) {
const { name, value } = e.target;
setInputs((inputs) => ({ ...inputs, [name]: value }));
}
function handleChechbox(e) {
const { name, value } = e.target;
console.log("eeeeee check", e.target.type);
console.log("eeeeee check", e.target.checked);
console.log("eeeeee check inputs", inputs);
console.log("eeeeee check inputs remember", inputs.rememberPassword);
if (e.target.type === "checkbox" && !e.target.checked) {
setInputs((inputs) => ({ ...inputs, [name]: "" }));
} else {
setInputs((inputs) => ({ ...inputs, [name]: value }));
}
}
function handleSubmit(e) {
e.preventDefault();
setSubmitted(true);
if (inputs) {
// get return url from location state or default to home page
const { from } = location.state || {
from: { pathname: "/admin/summary" },
};
dispatch(loginActions.login(inputs, from));
// props.history.push("/admin/summary");
}
}
return (
<div className="Login">
<div className="login-form-container">
<div className="content">
<Form className="login-form" onSubmit={handleSubmit}>
<InputGroup>
<InputGroupAddon
className="input-group-addon"
addonType="prepend"
>
<i className="fa fa-user"></i>
</InputGroupAddon>
<input
autoFocus
type="email"
aria-label="Username"
aria-describedby="Username"
aria-invalid="false"
placeholder="Username or Email"
name="userid"
value={userid}
onChange={(event) => handleChange(event)}
className={
"form-control" + (submitted && !userid ? " is-invalid" : "")
}
/>
{submitted && !userid && (
<div className="invalid-feedback">
Username or Email is required
</div>
)}
</InputGroup>
<InputGroup>
<InputGroupAddon
className="input-group-addon"
addonType="prepend"
>
<i className="fa fa-lock"></i>
</InputGroupAddon>
<input
type="password"
name="password"
placeholder="Password"
aria-label="password"
aria-describedby="password"
value={password}
onChange={(event) => handleChange(event)}
className={
"form-control" + (submitted && !password ? " is-invalid" : "")
}
/>
{submitted && !password && (
<div className="invalid-feedback">Password is required</div>
)}
</InputGroup>
<div className="form-actions">
<br />
<div className="form-check">
<input
type="checkbox"
className="form-check-input"
id="rememberPassword"
name="checkbox"
checked={rememberPassword}
onChange={(event) => handleChechbox(event)}
// required
/>
<label className="form-check-label" for="rememberPassword">
Remember me
</label>
</div>
</div>
</Form>
</div>
</div>
</div>
);
};
You're reading the name attribute which is 'checkbox' not 'rememberPassword'. I'd imagine a simple console log of inputs would reveal you're setting the wrong property name.
Anyway your input is controlled, you don't need to read DOM values since you know that the value is and what it should change to.
function handleRememberMeChange(e) {
setInputs((inputs) => ({ ...inputs, rememberPassword: !inputs.rememberPassword }));
}
If you want it to work generically from an attribute then use id or change name to "rememberPassword". And use e.target.checked not e.target.value.
Also it's fine to do onChange={handleChechbox} instead of onChange={(event) => handleChechbox(event)} it's the same thing.

React final form - Validation return key & value instead of string

Currently I am using React-Final-Form and I want to return an object or key/value instead of an error string.
This is my validation rule:
validate={values => {
const errors = {}
if (!values.username) {
errors.username = 'Required'
}
if (!values.password) {
errors.password = 'Required'
}
if (!values.confirm) {
errors.confirm = 'Required'
} else if (values.confirm !== values.password) {
errors.confirm = 'Must match'
}
return errors
}}
This prints the error:
{meta.error && meta.touched && <span>{meta.error}</span>}
Instead of seeing Required I want to be able to say: key -> 'required' and the value of this key is 'please fill in the field'. I know it is possible to change the string of 'Required' but I want to have a key value. I cannot make an object it won't allow me.
Desired result:
{meta.error && meta.touched && {meta.error.required}}
UI will show:
Please fill in the field
This playground of react-final-form can be used since it is almost the same:
https://final-form.org/docs/react-final-form/examples/record-level-validation
Well, you can do it like this:
<Form
onSubmit={onSubmit}
validate={values => {
const errors = {}
if (!values.username) {
errors.username = { required: true, text: "Please fill in the field"} // this is used as an object
}
if (!values.password) {
errors.password = 'Required'
}
if (!values.confirm) {
errors.confirm = 'Required'
} else if (values.confirm !== values.password) {
errors.confirm = 'Must match'
}
return errors
}}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<Field name="username">
{({ input, meta }) => {
console.log(meta) // to see the structure of your meta
return (
<div>
<label>Username</label>
<input {...input} type="text" placeholder="Username" />
{meta.error && meta.touched && <span>{meta.error.text}</span>}
// then here if you still want to use string you can put what you need
</div>
)}}
</Field>
<Field name="password">
{({ input, meta }) => (
<div>
<label>Password</label>
<input {...input} type="password" placeholder="Password" />
{meta.error && meta.touched && meta.required && <span>{meta.error}</span>}
</div>
)}
</Field>
<Field name="confirm">
{({ input, meta }) => (
<div>
<label>Confirm</label>
<input {...input} type="password" placeholder="Confirm" />
{meta.error && meta.touched && <span>{meta.error}</span>}
</div>
)}
</Field>
<div className="buttons">
<button type="submit" disabled={submitting}>
Submit
</button>
<button
type="button"
onClick={form.reset}
disabled={submitting || pristine}
>
Reset
</button>
</div>
<pre>{JSON.stringify(values, 0, 2)}</pre>
</form>
)}
/>

Resources