<script type="text/javascript">
// Fetching all HTML inputs
var fullname=document.forms["myform"]["fullname"];
var email=document.forms["myform"]["email"];
var mobile=document.forms["myform"]["mobile"];
var password=document.forms["myform"]["password"];
var confirmpassword=document.forms["myform"]["confirmpassword"];
//Fetching html component by their ID
var fullname_error=document.getElementById("fullname_error");
var email_error=document.getElementById("email_error");
var mobile_error=document.getElementById("mobile_error");
var password_error=document.getElementById("password_error");
var confirmpassword_error=document.getElementById("confirmpassword_error");
// Setting event listner for all inputs
fullname.addEventListener("blur", nameVerify, true);
email.addEventListener("blur()", emailVerify, true);
mobile.addEventListener("blur()", mobileVerify, true);
password.addEventListener("blur()", passwordVerify, true);
confirmpassword.addEventListener("blur()", confirmpasswordVerify, true);
function validate()
{
if (fullname.value=="")
{
fullname.style.borderColor = 'red';
fullname_error.textContent="Fullname is required";
fullname.focus();
return false;
}
else
{
}
}
function nameVerify()
{
if (fullname.value !="") {
fullname_error.innerHTML="";
return true;
}
else {
}
}
</script>
&#13;
.cssfullname
{
color: red;
}
&#13;
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<form role="form" method="post" name="myform" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div>
<input type="text" id="txt1" class="form-control" style="width: 200px;" name="fullname" placeholder="Fullname">
<br>
<div id="fullname_error" class="cssfullname"></div>
</div>
<div>
<input type="text" id="txt2" class="form-control " style="width: 200px; name="email" placeholder="Email" >
<br>
<div id="email_error"></div>
</div>
<div>
<input type="text" id="txt3" class="form-control" style="width: 200px; name="mobile" placeholder="Mobile">
<br>
<div id="mobile_error"></div>
</div>
<div>
<input type="password" id="pass" class="form-control" style="width: 200px;name="password" placeholder="Password">
<br>
<div id="password_error"></div>
</div>
<div>
<input type="password" id="passcon" class="form-control" style="width: 200px; name="confirmpassword" placeholder="Confirm password">
<br><br>
<div id="confirmpassword_error"></div>
</div>
<div>
<input type="submit" class="btn btn-success" onclick="validate()" name="btnsubmit" value="Submit">
<br>
</div>
</form>
</body>
</html>
How to overcome that problem? what to do
when i click on submit....text becomes empty.........................................................
&#13;