<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 ----------> <form action="" 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="">Username:</label> <input type="text" id="user" name="username" class="form-control" autocomplete="off"> <span id="userid" class="text-info"></span> <br> <label for="">E-mail</label> <input type="email" id="mail" name="mailname" class="form-control" autocomplete="off"> <span id="mailid" class="text-info"></span> <br> <label for="">Password</label> <input type="password" id="pass" name="passname" class="form-control" autocomplete="off"> <span id="passid" class="text-info"></span> <br> <label for="">Confirm password</label> <input type="password" name="con" id="conpass" class="form-control" autocomplete="off"> <span id="conid" class="text-info"></span> <br> <button class="btn " style="background-color: brown;">Submit</button> </div> </div> </form>

<script> function validation() { var username = document.getElementById("user").value , mailname=document.getElementById("mail").value , passname=document.getElementById("pass").value,con=document.getElementById("conpass").value; if(username ==='' ) { document.getElementById("userid").innerHTML ="*** Plaese enter your Name***"; return false; } if( mailname =='') { document.getElementById("mailid").innerHTML ="*** Plaese enter your E-mail***"; return false; } if( passname =='' ) { document.getElementById("passid").innerHTML ="*** Plaese enter your Password***"; return false; } if( con =='') { document.getElementById("conid").innerHTML="***Enter your project name***"; return false; } if(passname!=con) { document.getElementById("conid").innerHTML="***Your Confirm password does'nt match***"; return false; } if(passname =='@'|| passname=='!'||passname|| passname =='_'|| passname=='^'||passname=='$') { document.getElementById("passid").innerHTML="** your password must consist of special characters @,!,$,^,_,etc**"; return false; } document.write("Your application is submitted !..."); } </script>