All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

JavaScript Form Validation Example Download

Last Updated : Mar 11, 2024

JavaScript Form Validation Example Download

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 " >
    <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>
        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 ;
    <h1> TALKERSCODE </h1>
    <h3> javascript form validation example download </h3>
    <p id="error"></p>
    <div class="container">
    <form action="/" method="get" id="form">
            <label for="f_name"> First Name: </label>
            <input type="text" name="f_name" id="f_name">
            <label for="l_name"> Last Name: </label>
            <input type="text" name="l_name" id="l_name">
            <label for="email"> email ID: </label>
            <input type="email" name="email" id="email">
            <label for="password"> password: </label>
            <input type="password" name="password" id="password">
        <button type="submit"> submit </button>
        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){
                errorElement.innerHTML = messages.join (', ')
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. Create a <div> with the Id ‘error’ , which will be used here to show the error messages if the form is invalid.
  8. Creating a <div> with the class container. Between that <div> create a form using the HTML input property.
  9. Created the <style> tag to add CSS to the HTML page.
  10. to add JavaScript Create a <script> tag.
  11. Create a variable using cosnt tag for every input tag, the errorElement and the form by document.getElementById().
  12. 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.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪