<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1 style="text-align: center;color: white;font-size: 6cap;font-style:unset;">Fill this form </h1> <div class="row"> <div class="col-md-6"> <form action="" style="margin-left: 6%;width: 400px;" onsubmit="return validation();"> <div class=" w-100 bg-white rounded form-group" style="padding-left: 6%;padding-top: 4%;padding-bottom: 5%;"> <div class="mb-2 mt-2 text-dark w-75 border-dark"> <label for="email">Name:</label> <input type="text" class="form-control" id="username" placeholder="Enter name" name="user" autocomplete="off"> <span id="usernameid" class="text-warning"></span> </div> <div class="mb-2 mt-2 text-dark w-75 border-dark"> <label for="">Phone number:</label> <input type="number" class="form-control" id="phone" placeholder="(+92344)" name="phon" autocomplete="off"> <span id="phoneid" class="text-warning"></span> </div> <div class="mb-2 mt-2 text-dark w-75 border-dark"> <label for="email">Email:</label> <input type="email" class="form-control" id="maill" placeholder="Enter email" name="mail" autocomplete="off"> <span id="mailid" class="text-warning"></span> </div> <div class="mb-2 mt-2 text-dark w-75 border-dark"> <label for="">Project name:</label> <input type="text" class="form-control" id="pro" placeholder="Name of your project " name="proj" autocomplete="off"> <span id="proid" class="text-warning" ></span> </div> <div class="mb-3 text-dark w-75 border-dark"> <label for="pwd">Details</label> <input type="text" class="form-control" id="pwd" placeholder="Tell us about your project" name="pswd" autocomplete="off"> </div> <div class="form-check mb-3 text-dark w-75"> <label class="form-check-label "> <input class="form-check-label border-dark" type="checkbox" name="remember"> Remember me </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> </div>

<script> function validation() { var user = document.getElementById("username").value , mail=document.getElementById("maill").value , phon=document.getElementById("phone").value,proj=document.getElementById("pro").value; if(user ==='' ) { document.getElementById("usernameid").innerHTML ="*** Plaese enter your Name***"; return false; } if( mail =='') { document.getElementById("mailid").innerHTML ="*** Plaese enter your E-mail***"; return false; } if( phon =='' ) { document.getElementById("phoneid").innerHTML ="*** Plaese enter your Phone number***"; return false; } if( proj =='') { document.getElementById("proid").innerHTML="***Enter your project name***"; return false; } } </script>