How to Make JavaScript Client side form Validation

hello viewer, in this article I will how make JavaScript client site form validation. two types of form validation one is client side and another one is server side. in this article I will teach you client site form validation.

first question in your mind generate why I used form validation it’s necessary or not?

How to Make jQuery client side form validation

so, don’t worry I will explain you why we are using form validation. generally, you are browsing multiple websites in internet. but some website has form validation and some are maybe not. what is different in both website with form validation and without form validation. so, I will tell you what is different.

when I create form with validation. then I have not received any unnecessary request for client side. and when we are not use form validation. then we have received multiple unnecessary requested. you can say another word. when you are received correct data from client side then you used form validation in your form.

JavaScript Shopping Cart Tutorial for Beginners | Add To Cart

copy the below code and paste in your html document

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple HTML Form</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/form.js"></script>
</head>
<body>
   
        

<form name="Form" onsubmit="return validateForm()" >
    <h2>Registration Form</h2>
    <div class="box">
        <label>Full Name</label>
        <input type="text" name="name" id="name">
        <div class="error" id="nameErr"></div>
    </div>
    <div class="box">
        <label>Email Address</label>
        <input type="text" name="email" id="email">
        <div class="error" id="emailErr"></div>
    </div>
    <div class="box">
        <label>Mobile Number</label>
        <input type="text" name="mobile" maxlength="10" id="mobile">
        <div class="error" id="mobileErr"></div>
    </div>
    <div class="box">
        <label>Country</label>
        <select name="country" id="country">
            <option>Select</option>
            <option>London</option>
            <option>India</option>
            <option>America</option>
        </select> 
        <div class="error" id="countryErr"></div>
    </div>
    <div class="box">
        <label>Gender</label>
        <div class="form-inline" id="gender">
            <label><input type="radio" name="gender" value="male"> Male</label>
            <label><input type="radio" name="gender" value="female"> Female</label> 
        </div>
        <div class="error" id="genderErr"></div>
    </div>
          
    <div class="box">
        <input type="submit" value="Submit">
    </div>
</form>


</body>
</html>

copy the below code and paste in your CSS document

CSS Code

body {
    font-size: 16px;
    font-family: system-ui;
    background:-webkit-radial-gradient(top left, #90F6FB,#2C3283);
}

.form{
    width: 100%;
}
h2 {
    text-align: center;
    color: #ef6e58;
}
form {
    width: 300px;
    padding: 15px 40px 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    margin: 4% auto;
}
label {
    display: block;
    margin-bottom: 5px
}
label i {
    color: #999;
    font-size: 80%;
}
input, select {
    border: 1px solid #ccc;
    padding: 10px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
    background-color: #a9bae64a;
}
.box {
    padding-bottom: 10px;
}
.form-inline {
    border: 1px solid #ccc;
    padding: 8px 10px 4px;
    border-radius: 2px;
}
.form-inline label, .form-inline input {
    display: inline-block;
    width: auto;
    padding-right: 15px;
}
.error {
    color: red;
    font-size: 90%;
}
input[type=text]{
        outline: none;
}

input[type="submit"] {
    font-size: 110%;
    font-weight: 100;
    background: #ef6e58;
    border-color: #ef6e58;
    box-shadow: 0 3px 0 #bd432e;
    color: #fff;
    margin-top: 10px;
    cursor: pointer;
}
input[type="submit"]:hover {
    background: #bd432e;
    border-color: #bd432e;
}

.input-1{
    background-image: url(../images/check.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
    border:1px solid #01cc40;
}
.input-2{
    background-image: url(../images/cancel.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
    border:1px solid red;
}
.input-3{
    border:1px solid #01cc40!important;
}
select{
    outline: none!important;
}
.input-4{
    border:1px solid red;
}

copy the below code and paste in your JavaScript document

JavaScript Code

function printError(Id, Msg) {
    document.getElementById(Id).innerHTML = Msg;
}

function validateForm() {

    var name = document.Form.name.value;
    var email = document.Form.email.value;
    var mobile = document.Form.mobile.value;
    var country = document.Form.country.value;
    var gender = document.Form.gender.value;
    

    var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
    

    if(name == "") {
        printError("nameErr", "Please enter your name");
        var elem = document.getElementById("name");
            elem.classList.add("input-2");
            elem.classList.remove("input-1");
    } else {
        var regex = /^[a-zA-Z\s]+$/;                
        if(regex.test(name) === false) {
            printError("nameErr", "Please enter a valid name");
            var elem = document.getElementById("name");
            elem.classList.add("input-2");
            elem.classList.remove("input-1");
        } else {
            printError("nameErr", "");
            nameErr = false;
            var elem = document.getElementById("name");
            elem.classList.add("input-1");
            elem.classList.remove("input-2");

            
        }
    }
    

    if(email == "") {
        printError("emailErr", "Please enter your email address");
         var elem = document.getElementById("email");
            elem.classList.add("input-2");
            elem.classList.remove("input-1");
    } else {
        
        var regex = /^\S+@\S+\.\S+$/;
        if(regex.test(email) === false) {
            printError("emailErr", "Please enter a valid email address");
            var elem = document.getElementById("email");
            elem.classList.add("input-2");
            elem.classList.remove("input-1");
        } else{
            printError("emailErr", "");
            emailErr = false;
             var elem = document.getElementById("email");
            elem.classList.add("input-1");
            elem.classList.remove("input-2");

        }
    }
    
 
    if(mobile == "") {
        printError("mobileErr", "Please enter your mobile number");
        var elem = document.getElementById("mobile");
            elem.classList.add("input-2");
            elem.classList.remove("input-1");
    } else {
        var regex = /^[1-9]\d{9}$/;
        if(regex.test(mobile) === false) {
            printError("mobileErr", "Please enter a valid 10 digit mobile number");
            var elem = document.getElementById("mobile");
            elem.classList.add("input-2");
            elem.classList.remove("input-1");
        } else{
            printError("mobileErr", "");
            mobileErr = false;
            var elem = document.getElementById("mobile");
            elem.classList.add("input-1");
            elem.classList.remove("input-2");
        }
    }
    

    if(country == "Select") {
        printError("countryErr", "Please select your country");
        var elem = document.getElementById("country");
            elem.classList.add("input-4");
            elem.classList.remove("input-3");
    } else {
        printError("countryErr", "");
        countryErr = false;
        var elem = document.getElementById("country");
            elem.classList.add("input-3");
            elem.classList.remove("input-4");
    }
    

    if(gender == "") {
        printError("genderErr", "Please select your gender");
        var elem = document.getElementById("gender");
            elem.classList.add("input-4");
            elem.classList.remove("input-3");
    } else {
        printError("genderErr", "");
        genderErr = false;
        var elem = document.getElementById("gender");
            elem.classList.add("input-3");
            elem.classList.remove("input-4");
    }
    
    
    if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {
       return false;
    } 
};

if you have any problem to understand this code then you also watch video tutorials

2 thoughts on “How to Make JavaScript Client side form Validation

  • December 29, 2022 at 1:05 pm
    Permalink

    A person necessarily lend a hand to make seriously posts I might state. This is the very first time I frequented your web page and so far? I surprised with the research you made to create this actual submit extraordinary. Excellent process!

    Reply

Leave a Reply

Your email address will not be published.