Form Validation Using JavaScript with Source Code

  • Post author:
  • Post comments:0 Comments
  • Reading time:196 mins read

Navigate the world of web forms with confidence through our Form Validation project using JavaScript. In this article, we’ll guide you through the development process and provide the source code to create a user-friendly and error-preventing form validation system, ensuring the data entered by users is accurate and reliable for a seamless web experience.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation</title>
    <link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
    <form action="/" method="GET" id="form">
        <h1 class="title">Create Account</h1>
        <div class="row">
            <label for="name">Name</label>
            <input type="text" name="name" id="name" placeholder="Enter Name">
            <small>Error message goes here</small>
        </div>
        <div class="row">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" placeholder="Enter E-mail">
            <small>Error message goes here</small>
        </div>
        <div class="row">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" placeholder="Enter Password">
            <small>Error message goes here</small>
        </div>
        <div class="row">
            <label for="confirm-password">Confirm Password</label>
            <input type="password" name="confirm-password" id="confirm-password" placeholder="Enter Password Again">
            <small>Error message goes here</small>
        </div>
        <button type="submit" id="btn">Sign up</button>
        <div class="tNc">
            <input type="checkbox" name="terms" id="terms" required>
            <label for="terms">I have read and agree to the Terms of Service</label>
        </div>
    </form>

    <script src="./script.js" type="text/javascript"></script>
</body>
</html>


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --bg-form : #fcf8f3;
    --btn : #5056c6;
}
html,
body {
    font-size: 10px;
    font-family: 'lato' ,Arial, Helvetica, sans-serif;
}
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(45deg,#ff35a7, #ff283d);
}
#form {
    background: var(--bg-form);
    width: 34rem;
    height: 49rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    border-radius: 1rem;
}
.title {
    font-weight: bold;
    margin-bottom: 1.5rem;
}
.row {
    display: grid;
    font-size: 1.4rem;
    width: 24rem;
    height: 6.6rem;
    margin-bottom: 2rem;
}
.row input {
    border: none;
    outline: none;
    height: 3.5rem;
    border-radius: 0.5rem;
    padding: 0 1rem;
    border: 2px solid #dfd8d8;
}
.row.success input {
    border-color: rgb(8, 236, 8);
}
.row.error input {
    border-color: rgb(255, 0, 0);
}
.row input:focus {
    border-color: black ;
}
.row small {
    visibility: hidden;
}
.row.error small {
    text-align: center;
    color: red;
    letter-spacing: 1px;
    visibility: visible;
}
#btn {
    border: none;
    cursor: pointer;
    width: 24rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    background-color: var(--btn);
    color: var(--bg-form);
    font-size: 1.7rem;
    margin-bottom: 1rem;
}
#btn:hover {
    transition: opacity 0.2s ease-in-out;
    opacity: 0.8;
}
.tNc {
    display: flex;
    width: 24rem;
    font-size: 1.1rem;
}
#terms {
    margin-right: 1rem;
}


//DOM Elements
const nameElem = document.getElementById('name');
const emailElem = document.getElementById('email');
const passwordElem = document.getElementById('password');
const confirmPasswordElem = document.getElementById('confirm-password');
const terms = document.getElementById('terms');
const form = document.getElementById('form');

form.addEventListener('submit', handleForm);

function handleForm(event){
    event.preventDefault();
    verifyInputs();
}

function verifyInputs(){
    //get the user inputted values
    const name = nameElem.value.trim();  //trim is used to remove whitespaces from both ends (if user enters them)
    const email = emailElem.value.trim();
    const password = passwordElem.value.trim();
    const confirmPassword = confirmPasswordElem.value.trim();

    if(name === ''){
        //display error and add error class
        dealErrorFor(nameElem, 'Name cannot be Empty');
    }else {
        //add success class
        dealSuccessFor(nameElem);
    }

    if(email === ''){
        dealErrorFor(emailElem, 'Email cannot be Empty');
    }else if(!checkEmail(email)){
        dealErrorFor(emailElem, 'Email is not valid')
    }
    else {
        dealSuccessFor(emailElem);
    }

    if(password === ''){
        dealErrorFor(passwordElem, 'Password cannot be Empty');
    }else {
        dealSuccessFor(passwordElem);
    }

    if(confirmPassword === ''){
        dealErrorFor(confirmPasswordElem, 'Confirm Password is required');
    }else if(password !== confirmPassword){
        dealErrorFor(confirmPassword, `Password didn't match`);
    }else {
        dealSuccessFor(confirmPasswordElem);
    }

    if(!terms.checked){
        document.querySelector('.tNc').style.color = 'red';
    }else {
        document.querySelector('.tNc').style.color = 'black';
    }
}

function dealErrorFor(element, message){
    const row = element.parentElement;
    const small = row.querySelector('small');

    row.className = 'row error';
    small.innerText = message;
}

function dealSuccessFor(input){
    const row = input.parentElement;
    row.className = 'row success';
}

function checkEmail(email){
    const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return regex.test(email);
}
ideasorblogs
Latest posts by ideasorblogs (see all)

Leave a Reply