HTML Page
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 m-auto">
<h1>JavaScript Validation Form</h1>
<form action="#" onsubmit="return form()">
<div class="form-group">
<label>User Name:</label><br/>
<input type="text" name="unm" id="username" placeholder="Enter User Name" autocomplete="off"/> <br/>
<span id="err_unm" class="text-danger"></span>
</div>
<div class="form-group">
<label>Password: </label><br/>
<input type="password" name="Password" id="pwd" placeholder="Enter Password" autocomplete="off"/><br/>
<span id="err_pwd" class="text-danger"></span>
</div>
<div class="form-group">
<label>Confirm Password: </label><br/>
<input type="password" name="Password" id="cpwd" placeholder="Enter Confirm Password" autocomplete="off"/><br/>
<span id="err_cpwd" class="text-danger"></span>
</div>
<div class="form-group">
<lable> Gender: </lable>
<input type="radio" name="gender" id="male">Male
<input type="radio" name="gender" id="female">Female<br/>
<span id="err_gen" class="text-danger"></span>
</div>
<div class="form-group">
<label>Mobille Number: </label><br/>
<input type="password" name="mno" id="mno" placeholder="Enter Mobile Number" autocomplete="off"/><br/>
<span id="err_mno" class="text-danger"></span>
</div>
<div class="form-group">
<label>Email: </label><br/>
<input type="password" name="Password" id="email" placeholder="Enter Email" autocomplete="off"/><br/>
<span id="err_email" class="text-danger"></span>
</div>
<div>
<label>Hobby:</label>
<input type="checkbox"> A
<input type="checkbox"> B
<input type="checkbox"> C
</div>
<input type="submit" value="submit" class="btn btn-success" />
</form>
</div>
</div>
</div>
<script src="js/function.js"></script>
</body>
JS Page
function form(){
var user = document.getElementById("username").value;
var pwd = document.getElementById("pwd").value;
var cpwd = document.getElementById("cpwd").value;
var male = document.getElementById("male").checked;
var female = document.getElementById("female").checked;
var mno = document.getElementById("mno").value;
var email = document.getElementById("email").value;
var success = true;
document.getElementById("err_unm").innerHTML ="";
document.getElementById("err_pwd").innerHTML ="";
document.getElementById("err_cpwd").innerHTML = "";
document.getElementById("err_gen").innerHTML = "";
document.getElementById("err_pwd").innerHTML =" ";
document.getElementById("err_cpwd").innerHTML = "";
document.getElementById("err_mno").innerHTML = "";
document.getElementById("err_email").innerHTML = "";
if(user == ""){
document.getElementById("err_unm").innerHTML ="Please Enter User Name";
success = false;
}
else if(!isNaN(user)){
document.getElementById("err_unm").innerHTML = "Please Enter Valid Name";
success = false;
}
/******************************************************************/
if(pwd == ""){
document.getElementById("err_pwd").innerHTML = "enter password";
success = false;
}
else if(pwd.length <= 2 || pwd.length > 5){
document.getElementById("err_pwd").innerHTML ="Please Enter 2 to 5 word ";
success = false;
}
else if(isNaN(pwd)){
document.getElementById("err_pwd").innerHTML = "Enter Digit Only";
success = false;
}
else if(pwd != cpwd){
document.getElementById("err_cpwd").innerHTML = "No Match Password";
success = false;
}
/******************************************************************/
if(male == '' && female == '' ){
document.getElementById("err_gen").innerHTML = "Please select gender";
success = false;
}
/******************************************************************/
if(mno == ''){
document.getElementById("err_mno").innerHTML = "PLease Enter Mobile Number";
success =false;
}
else if(isNaN(mno)){
document.getElementById("err_mno").innerHTML = "Please Enter Digit";
success = false;
}
else if(mno.length != 10){
document.getElementById("err_mno").innerHTML = "Please Enter 10 Digit";
success= false;
}
/******************************************************************/
if(email == ""){
document.getElementById("err_email").innerHTML = "Please enter email";
success = false;
}
/******************************************************************/
if(email.indexOf('@') <= 0 ){
document.getElementById("err_email").innerHTML = "wrong @ Position";
success = false;
}
else if((email.charAt(email.length-4)!='.' ) && (email.charAt(email.length-3)!='.')){
document.getElementById("err_email").innerHTML="enter . position last";
success = false;
}
return success;
}