<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>.cssfullname
{
color: red;
}<!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.........................................................the error message also removed when click on submit button.the error message also removed when click on submit button.the error message also removed when click on submit button.the error message also removed when click on submit button.the error message also removed when click on submit button.the error message also removed when click on submit button.the error message also removed when click on submit button.