How to use javascript for form all field validation ?

Javascript is for client side validation for form field, here i am going to teach you javascript all form field validation, here for date comes using php 

Html of form is given below 

put this code between body tag include bootstrap cdn 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

    <script src="yourpath/script.js"></script>

<div class="container">
        <div class="row">

            <div class="col-sm-12">
<form method="post" name="caccount" onsubmit="return validation()"  id="caccount" action="create-account.php" enctype="multipart/form-data" >
                        <!--First name field start  -->
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group"><label for="firstname">First Name</label></div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="text" name="fname" id="fname" class="form-control" placeholder="Fristname" >
                                </div>
                            </div>
                        </div>
                        <!--last name field start  -->
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="lastname">Last Name</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="text" name="lname" id="lname" class="form-control" placeholder="Last Name" >
                                </div>
                            </div>
                        </div>
                        <!--image field start  -->
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="userimage">User Image</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="file" name="image" id="image" class="form-control-file" >
                                </div>
                            </div>
                        </div>
                        <!--radio field start  -->
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="gender">Gender</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-check">
                                    <input type="radio" name="gender" id="male" checked class="form-check-input" value="male" >
                                    <label for="male" class="form-check-label">Male</label>
                                </div>
                                <div class="form-check">
                                    <input type="radio" name="gender" id="female" class="form-check-input" value="female">
                                    <label for="female" class="form-check-label">Female</label>
                                </div>
                            </div>
                        </div>
<!--select box dob field start  -->
                        <div class="row pt-3">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="dob">Date Of Birth</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <!-- day -->
                                    <select name="day" id="day" class="form-contro">
<option value="">Day</option>
                                        <?php
                                            $count = 1;
                                            while($count <= 31){
                                                echo "<option value='$count'>$count</option>";
                                                $count++;
                                            }
                                        ?>
                                    </select>
                                    <!-- month -->
                                    <select name="month" id="month" class="form-contro">
<option value="">Month</option>
                                        <?php
                                            $count = 1;
                                            while($count <= 12){
                                                echo "<option value='$count'>$count</option>";
                                                $count++;
                                            }
                                        ?>
                                    </select>
                                    <!-- year -->
                                    <select name="year" id="year" class="form-contro">
<option value="">Year</option>
                                        <?php
                                            $nowyear = date('Y');
                                            $oldyear = date('Y') - 80;
                                            while($nowyear >= $oldyear ){
                                                echo "<option value='$nowyear'>$nowyear</option>";
                                                $nowyear--;
                                            }
                                        ?>
                                    </select>
                                </div>
                            </div>
                        </div>
<!--select box dob field end  -->
                        <!--language field start  -->
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="checkbox">Language</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="lang[]" id="English" value="English">
                                        <label for="English" class="form-check-label">English</label>       
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="lang[]" id="Hindi" value="Hindi">
                                        <label for="Hindi" class="form-check-label">Hindi</label>       
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="lang[]" id="Gujarati" value="Gujarati">
                                        <label for="Gujarati" class="form-check-label">Gujarati</label>       
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--language field end  -->
                        <!--email field end  -->
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="email">Email</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="email" name="email" id="email" placeholder="Email" class="form-control">
                                </div>
                            </div>
                        </div>
                        <!--email field end  -->
                        <!--username field start  -->
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="username">Username</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="text" name="username" id="username" placeholder="Username" class="form-control">
                                </div>
                            </div>
                        </div>
                        <!--language field end  -->
                        <!--password field start  -->
                         <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="password">Password</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="password" name="password" id="password" placeholder="password" class="form-control">
                                </div>
                            </div>
                        </div>
                        <!--password field end  -->  
                        <!--confirm password field start  -->
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="confirmpassword">Confirm Password</label>
                                </div>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <input type="password" name="cpassword" id="cpassword" placeholder="Confirm Password" class="form-control">
                                </div>
                            </div>
                        </div>
                        <!--confirm password field end  -->   
                        <!--submit start  -->
                        <div class="row">
                            <div class="cols-sm-12">
<div id="demo"></div>
                                <div class="form-group">
                                    <input type="submit"  name="submit" id="submit" class="btn btn-success ml-3"  value="Save">
                                </div>
                            </div>
                        </div>
                        <!--submit end  -->                 

                    </form>
</div>
</div>
</div>

create script.js file and save it and include that file between head tag using 
<script src="yourpath/script.js"></script>

now add this code in script.js file 


/* create account validation */
function validation()
{
//alert('hi');
//return false;

var afname = document.getElementById("fname").value;
if(afname==""){
alert("first name is empty");
return false;
}

var alname = document.getElementById("lname").value;
if(alname==""){
alert("Last name is empty");
return false;
}
//return false;

if(document.getElementById("image").files.length == 0){
alert("please select image");
return false;
}

//radio input 

if(!document.getElementById("male").checked && !document.getElementById("female").checked){
alert("please check gender");
//return false;
return false;
}
if(document.getElementById("day").selectedIndex == 0){
alert('please select day');
return false;
}
if(document.getElementById("month").selectedIndex == 0){
alert('please select month');
return false;
}
if(document.getElementById("year").selectedIndex == 0){
alert('please select year');
return false;
}
if(!document.getElementById("English").checked && !document.getElementById("Hindi").checked && !document.getElementById("Gujarati").checked){
alert("please check one language");
//return false;
return false;
}

var email = document.getElementById("email").value;
if(email==""){
alert("please enter email");
return false;
}


var username = document.getElementById("username").value;
if(username==""){
alert("username is empty");
return false;
}
var password = document.getElementById("password").value;
if(password==""){
alert("password name is empty");
return false;
}
var cpassword = document.getElementById("cpassword").value;
if(cpassword==""){
alert("confirm password  is empty");
return false;
}
if(password!=cpassword){
alert("password not same");
return false;
}
}




Thank you for visit my blog