In this article, we will learn about validating input fields and how to reset the field after submission. Before we start, Please read the article about how to create an input form and how to get the input values in React.
We will follow the below steps to continue with our goal.
- Validating input value
- Resetting input values.
Validating input values
import React, { useState } from 'react';
import Button from './Button';
import Card from './Card';
const AddUser = () => {
const [userName, setUserName] = useState('');
const [userEmail, setUserEmail] = useState('');
const handleFormSubmission = e => {
e.preventDefault();
}
console.log({
name: userName,
email: userEmail
})
return (
<div>
<Card className="bg-gray-400 mx-auto my-24 rounded-md shadow-gray-300 shadow-lg w-1/2">
<form
onSubmit={handleFormSubmission}
className='border-2 border-gray-400 shadow-lg rounded-md'>
<div className='my-4 block mx-auto w-1/2'>
<label htmlFor="name"></label>
<input
onChange={e => setUserName(e.target.value)}
className='input input-bordered w-full max-w-xs'
id='name' name="name"
type="text"
placeholder='name'
/>
</div>
<div className='my-4 block mx-auto w-1/2'>
<label htmlFor="email"></label>
<input
onChange={e => setUserEmail(e.target.value)}
className='input input-bordered w-full max-w-xs'
id='email'
name="email"
type="email"
placeholder='email'
/>
</div>
<div className=' my-10 block mx-auto w-1/2'>
<Button className='btn' type="submit">Submit</Button>
</div>
</form>
</Card>
</div>
);
};
export default AddUser;
Here, we have two states to get the input values and two onChange() events to update the input values.
- Write if conditions to check whether any of the input values are empty or not.
if (!userName || !userEmail) {
return;
}
import React, { useState } from 'react';
import Button from './Button';
import Card from './Card';
const AddUser = () => {
const [userName, setUserName] = useState('');
const [userEmail, setUserEmail] = useState('');
const handleFormSubmission = e => {
e.preventDefault();
if (!userName || !userEmail) {
return;
}
}
console.log({
name: userName,
email: userEmail
})
return (
<div>
<Card className="bg-gray-400 mx-auto my-24 rounded-md shadow-gray-300 shadow-lg w-1/2">
<form
onSubmit={handleFormSubmission}
className='border-2 border-gray-400 shadow-lg rounded-md'>
<div className='my-4 block mx-auto w-1/2'>
<label htmlFor="name"></label>
<input
onChange={e => setUserName(e.target.value)}
className='input input-bordered w-full max-w-xs'
id='name' name="name"
type="text"
placeholder='name'
/>
</div>
<div className='my-4 block mx-auto w-1/2'>
<label htmlFor="email"></label>
<input
onChange={e => setUserEmail(e.target.value)}
className='input input-bordered w-full max-w-xs'
id='email'
name="email"
type="email"
placeholder='email'
/>
</div>
<div className=' my-10 block mx-auto w-1/2'>
<Button className='btn' type="submit">Submit</Button>
</div>
</form>
</Card>
</div>
);
};
export default AddUser;
Input values always give a string result. An empty string is a false value. We are checking whether any of the values are empty or not.
- Add a return statement if the values are empty.
if (!userName || !userEmail) {
return;
}
If this condition doesn’t match, then it won’t execute the if block here. And we will get the input values. We can console log these and check the values in our browser console.
console.log({
name: userName,
email: userEmail
})
import React, { useState } from 'react';
import Button from './Button';
import Card from './Card';
const AddUser = () => {
const [userName, setUserName] = useState('');
const [userEmail, setUserEmail] = useState('');
const handleFormSubmission = e => {
e.preventDefault();
if (!userName || !userEmail) {
return;
}
}
console.log({
name: userName,
email: userEmail
})
return (
<div>
<Card className="bg-gray-400 mx-auto my-24 rounded-md shadow-gray-300 shadow-lg w-1/2">
<form
onSubmit={handleFormSubmission}
className='border-2 border-gray-400 shadow-lg rounded-md'>
<div className='my-4 block mx-auto w-1/2'>
<label htmlFor="name"></label>
<input
onChange={e => setUserName(e.target.value)}
className='input input-bordered w-full max-w-xs'
id='name' name="name"
type="text"
placeholder='name'
/>
</div>
<div className='my-4 block mx-auto w-1/2'>
<label htmlFor="email"></label>
<input
onChange={e => setUserEmail(e.target.value)}
className='input input-bordered w-full max-w-xs'
id='email'
name="email"
type="email"
placeholder='email'
/>
</div>
<div className=' my-10 block mx-auto w-1/2'>
<Button className='btn' type="submit">Submit</Button>
</div>
</form>
</Card>
</div>
);
};
export default AddUser;
Resetting input fields
Sometimes, it is necessary to reset the input fields after successful form submission. To do that,
- Add a value attribute to the input fields.
<input
value={}
onChange={e => setUserName(e.target.value)}
className='input input-bordered w-full max-w-xs'
id='name' name="name"
type="text"
placeholder='name'
/>
- Pass their respective states as the value,
<form
onSubmit={handleFormSubmission}
className='border-2 border-gray-400 shadow-lg rounded-md'>
<div className='my-4 block mx-auto w-1/2'>
<label htmlFor="name"></label>
<input
value={userName}
onChange={e => setUserName(e.target.value)}
className='input input-bordered w-full max-w-xs'
id='name' name="name"
type="text"
placeholder='name'
/>
</div>
<div className='my-4 block mx-auto w-1/2'>
<label htmlFor="email"></label>
<input
value={userEmail}
onChange={e => setUserEmail(e.target.value)}
className='input input-bordered w-full max-w-xs'
id='email'
name="email"
type="email"
placeholder='email'
/>
</div>
<div className=' my-10 block mx-auto w-1/2'>
<Button className='btn' type="submit">Submit</Button>
</div>
</form>
- After the form submission, set the input values as an empty string.
const handleFormSubmission = e => {
e.preventDefault();
if (!userName || !userEmail) {
return;
};
setUserEmail('');
setUserName('');
console.log({
name: userName,
email: userEmail
});
}
import React, { useState } from 'react';
import Button from './Button';
import Card from './Card';
const AddUser = () => {
const [userName, setUserName] = useState('');
const [userEmail, setUserEmail] = useState('');
const handleFormSubmission = e => {
e.preventDefault();
if (!userName || !userEmail) {
return;
};
setUserEmail('');
setUserName('');
console.log({
name: userName,
email: userEmail
});
}
return (
<div>
<Card className="bg-gray-400 mx-auto my-24 rounded-md shadow-gray-300 shadow-lg w-1/2">
<form
onSubmit={handleFormSubmission}
className='border-2 border-gray-400 shadow-lg rounded-md'>
<div className='my-4 block mx-auto w-1/2'>
<label htmlFor="name"></label>
<input
value={userName}
onChange={e => setUserName(e.target.value)}
className='input input-bordered w-full max-w-xs'
id='name' name="name"
type="text"
placeholder='name'
/>
</div>
<div className='my-4 block mx-auto w-1/2'>
<label htmlFor="email"></label>
<input
value={userEmail}
onChange={e => setUserEmail(e.target.value)}
className='input input-bordered w-full max-w-xs'
id='email'
name="email"
type="email"
placeholder='email'
/>
</div>
<div className=' my-10 block mx-auto w-1/2'>
<Button className='btn' type="submit">Submit</Button>
</div>
</form>
</Card>
</div>
);
};
export default AddUser;
Before submission,
After submission,
After a successful form submission, the input states are set as an empty strings or no values. And this empty string will be passed down as a value to these input fields. Hence, we will see the input field values gone after form submission. Hence, we are resetting the input fields after form submission.
