So you have or want to create a form and would like to get data from it, as well as have it checked so it doesn't submit empty.
Before we dive into that, I want to assume you are a little bit familiar with JavaScript, if you don't know javascript in-depth don't worry we won't be doing any pro coding.
For this tutorial we will be using this login page as a real life demo.
The Html
I have a really simple html below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple login page</title>
</head>
<body>
<section class="log-in-page">
<div class="main-page">
<div class="welcome">
<h2>Welcome back</h2>
<span class="guide">Please enter your details.</span>
</div>
<form class="form" action="#!">
<label for="email" class="label">
Email
<input name="email" type="email" class="input-field" id="email"
placeholder="Enter your email" />
</label>
<label for="password" class="label">
Password
<input name="password" type="password" class="input-field" id="password"
placeholder="Enter your password" />
</label>
<p class="error"></p>
<div class="actions">
<label for="check-box">
<input type="checkbox" class="check-box" id="check-box" />
Remember for 30 days</label>
<a href="#!">Forgot Password?</a>
</div>
<button class="btn">Sign in</button>
</form>
<p>
<a href="#!">Don't have an account? Sign up</a>
</p>
</div>
<div class="sub-page">
<img src="https://images.unsplash.com/photo-1675050757561-741bd739bc06?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDEwfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=900&q=60"
alt="image from unsplash"
class="img"
/>
</div>
</section>
</body>
</html>
The Css
body {
line-height: 1.5em;
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
font-family: poppins, Verdana, Geneva, Tahoma, sans-serif;
margin: 0;
}
.welcome {
text-align: center;
margin: 10px 0 10px 0;
}
h2 {
margin-bottom: 10px;
font-size: 31px;
}
.log-in-page {
width: 100%;
height: 100vh;
display: flex;
}
.main-page {
width: 50%;
height: 100vh;
background: radial-gradient(circle, #83c5bf85 0%,#d8e2dc 30%);
/* background-color: white; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sub-page {
width: 50%;
height: 100vh;
}
.form {
width: 450px;
margin: 15px 0 15px 0;
position: relative;
}
.actions {
width: 100%;
display: flex;
justify-content: space-between;
margin: 40px 0 10px 0;
}
.input-field {
display: block;
width: inherit;
height: 50px;
margin-top: 15px;
margin-bottom: 15px;
padding: 15px;
border: 1px solid #006d77;
background-color: transparent;
font-size: 18px;
box-sizing: border-box;
border-radius: 5px;
transition: ease-in-out;
transition-duration: .4s;
}
.input-field::placeholder {
font-size: 16px;
}
.input-field:focus {
outline: none;
border: 1px solid #006d77bb;
}
.btn {
box-sizing: border-box;
border: none;
width: 100%;
height: 46px;
padding: 10px;
margin-top: 20px;
border-radius: 5px;
background-color: #006d77;
transition: ease-in-out;
transition-duration: 1s;
color: white;
font-size: 18px;
}
.btn:hover {
background-color: #006d77bb;
}
.btn:active {
transform: scale(0.8);
}
.btn:focus {
outline: none;
}
.label {
width: 100%;
}
.img {
width: 100%;
object-fit: cover;
}
a {
color: #075157;
text-decoration: none;
}
.error {
text-align: center;
color: #9d0208;
font-size: small;
margin: 10px 0 10px 0;
}
.check-box{
accent-color: #006d77bb;
}
@media (max-width: 900px) {
.main-page {
width: 100%;
background-color: white;
}
.sub-page {
display: none;
}
.form {
width: 70%;
}
}
@media (max-width: 600px) {
.main-page {
background: white;
}
.form {
width: 90%;
}
.actions {
font-size: 14px;
}
h2 {
font-size: 25px;
}
}
After html and css have been sorted we have something like this set up.
The JavaScript
The first thing we need to do is to define some variables, now depending on what your form consists of you may need different variable to hold different values, but working with the html above, here are the variables we would be using.
const form = document.querySelector('.form');
const formData = [];
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const errorMsg = document.querySelector('.error');
The form is saved in a variable so an event Listener like submit can be called on it, the formData is empty for now but later on it is going to hold our data gotten from the form. Then, our html form fields email and password are stored in a variable, lastly there's an html paragraph that is stored in the errorMsg variable which would display any error that occurs, like if a field is empty.
In order to track the effect of what we would be doing to our form add the following code below.
form.addEventListener('submit', (event) => {
event.preventDefault();
formValidation()
})
The event listener above listens for the submit event either by clicking on the form's submit button or by clicking on your device's enter key. Then what it does is to first prevent the normal way an html form is submitted which by default causes the browser to refresh, right after that a function we would be creating next is called in advance.
With that being done, lets create the formValidation function called above.
The formValidation is created to check that the form isn't empty or one of it's fields void, only after that is sorted out, would we be able to get the data from the fields.
Add the code below
function formValidation() {
if (emailInput.value === ''
&& passwordInput.value === '') {
errorMsg.textContent = 'The form is empty';
} else if (emailInput.value === '') {
errorMsg.textContent = 'Please enter your email'
} else if (passwordInput.value === '') {
errorMsg.textContent = 'Please enter your password';
} else {
// At this stage the form is definitely not empty
errorMsg.textContent = ''
emailInput.value = '';
passwordInput.value = '';
}
}
The above function consists of if statements that sees to the fact that the form cannot be submitted empty or one field left out and if that occurs then an error message pops up to alert the user that something is wrong.
A quick addition;
There are different ways to handle errors, you may not need to display an error message but simply changing the colour of say the border of the input to red can point the user to the fact that a particular field is empty.
The code below
function formValidation() {
if (emailInput.value === ''
&& passwordInput.value === '') {
emailInput.style.border = '1px solid red';
passwordInput.style.border = '1px solid red';
} else if (emailInput.value === '') {
emailInput.style.border = '1px solid red';
passwordInput.style.border = '1px solid #006d77';
} else if (passwordInput.value === '') {
passwordInput.style.border = '1px solid red';
emailInput.style.border = '1px solid #006d77';
} else {
// At this stage the form is definitely not empty
emailInput.style.border = '1px solid #006d77';
passwordInput.style.border = '1px solid #006d77';
emailInput.value = '';
passwordInput.value = '';
}
}
Now that we have handled all possible form errors, its time to get the data from the form fields, for this another function will be created.
Add the code below;
function getFormData() {
const userEmail = emailInput.value;
const userPassword = passwordInput.value;
formData.push(
{
'Email': userEmail,
'Password': userPassword
}
)
console.log(formData)
}
New variables like userEmail and userPassword are where the form input values are stored and pushed as an object into the formData array. If you check your console you will find this data.
Right after our form have been proven valid, call getFormData at the top of your else statement in your formValidation function.
function formValidation() {
********
else {
// below this comment
getFormData()
// above this comment
errorMsg.textContent = ''
emailInput.value = '';
passwordInput.value = '';
}
}
The full code below:
const form = document.querySelector('.form');
const formData = [];
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const errorMsg = document.querySelector('.error');
form.addEventListener('submit', (event) => {
event.preventDefault();
formValidation()
})
//validate that the form isn't empty
function formValidation() {
if (emailInput.value === ''
&& passwordInput.value === '') {
// I chose to show that there's an error by changing the color of the input's border
emailInput.style.border = '1px solid red';
passwordInput.style.border = '1px solid red';
} else if (emailInput.value === '') {
emailInput.style.border = '1px solid red';
passwordInput.style.border = '1px solid #006d77';
} else if (passwordInput.value === '') {
passwordInput.style.border = '1px solid red';
emailInput.style.border = '1px solid #006d77';
} else {
// gets the data from the form
getFormData()
emailInput.style.border = '1px solid #006d77';
passwordInput.style.border = '1px solid #006d77';
emailInput.value = '';
passwordInput.value = '';
}
}
function getFormData() {
const userEmail = emailInput.value;
const userPassword = passwordInput.value;
formData.push(
{
'Email': userEmail,
'Password': userPassword
}
)
console.log(formData)
}
Conclusion
And congratulations! You've validated a simple form and gotten reasonable data from it.
Keep in mind that there are other ways to do this and it is not within the scope of this tutorial to validate passwords and emails as this isn't an advance form. But don't be limited, now that you have an idea on what to do feel free to try different things, you can create an actual login page that verifies your email and password and a whole lot can be done to improve this simple form.
Drop a comment if you want a more advanced form validation tutorial.
That brings us to the end of the blog post, thanks for reading.
Top comments (0)