JavaScript Form Validation Example Download
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this article we will show you the solution of JavaScript form validation example download, before submitting a form we need to check if the input is in the right format.
In HTML, if we submit a form then using JavaScript we can check if the input submitted is validated or not.
Step By Step Guide On Javascript Form Validation Example Download :-
At first, let us see an example first on form validation using JavaScript.
<!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>JavaScript form validation example download</title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
.container {
display: flex;
padding-top: 60px;
align-items: center;
justify-content: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
form input{
margin: 2px solid black;
padding: 8px;
}
p {
color: red ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> javascript form validation example download </h3>
<p id="error"></p>
<div class="container">
<form action="/" method="get" id="form">
<div>
<label for="f_name"> First Name: </label>
<input type="text" name="f_name" id="f_name">
</div>
<div>
<label for="l_name"> Last Name: </label>
<input type="text" name="l_name" id="l_name">
</div>
<div>
<label for="email"> email ID: </label>
<input type="email" name="email" id="email">
</div>
<div>
<label for="password"> password: </label>
<input type="password" name="password" id="password">
</div>
<button type="submit"> submit </button>
</form>
</div>
<script>
const f_name = document.getElementById('f_name') ;
const l_name = document.getElementById('l_name') ;
const email = document.getElementById('email') ;
const password = document.getElementById('password') ;
const errorElement = document.getElementById('error')
const form = document.getElementById('form') ;
form.addEventListener('submit' , (e) => {
let messages = []
if (f_name.value === '' || f_name.value == null){
messages.push (' Please enter your fisrt name')
}
if (l_name.value === '' || l_name.value == null){
messages.push (' Please enter your last name')
}
if (email.value === '' || email.value == null){
messages.push (' Please enter your email ID')
}
if (password.value.length <= 8) {
messages.push ('password must be longer than 8 characters')
}
if (messages.length > 0){
e.preventDefault()
errorElement.innerHTML = messages.join (', ')
}
})
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Create a <div> with the Id ‘error’ , which will be used here to show the error messages if the form is invalid.
- Creating a <div> with the class container. Between that <div> create a form using the HTML input property.
- Created the <style> tag to add CSS to the HTML page.
- to add JavaScript Create a <script> tag.
- Create a variable using cosnt tag for every input tag, the errorElement and the form by document.getElementById().
- Using the .addEventListener() tag to add the condition of the validation if the user click on submit.
Conclusion :-
At last here in conclusion, here we can say that with this article’s help, we know how to do form validation using JavaScript.
I hope this article on JavaScript form validation example download helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
