HI All,
I have this JavaScript code, what it does is that there are 2 P elements hidden below 2 text boxes, if validation fails, the P element shows up with relevant error but the issue is that I am unable to show both text field together as only if the first text field is error free the second P element shows up, any idea what might be wrong...
Thank You
<!DOCTYPE html>
<!-- HTML 5 DECLARATION-->
<!-- BEGIN HTML -->
<html lang="en">
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<meta name="description" content="MAJESTIC Car Rental Website Project" />
<meta name="keywords" content="HTML5, CSS2.1, CSS3" />
<meta name="author" content="Enquiry Form" />
<script src="scripts.js"></script>
<title>MAJESTIC ENQUIRIES</title>
</head>
<body id="enquire">
<!-- BEGIN SECTION -->
<section id="form">
<div>
<form id="enqForm" method="post">
<div class="formobj">
<div id="enquiry"><h1>CUSTOMER ENQUIRIES</h1></div>
<input id="fn" type="text" name="firstname" placeholder="First Name *" />
<input id="ln" type="text" name="lastname" placeholder="Last Name *" />
<p id="fnp" type="hidden"></p>
<p id="lnp" type="hidden"></p>
<input id="sendbutton" type="submit" value="Enquire" />
</div>
</form>
</div>
</section>
</body>
<!-- END BODY -->
</html>
<!-- END HTML -->
function chk(valN, valP)
{
valN.style.borderColor = '#FF0000';
valN.style.color = '#FF0000';
valP.style.backgroundColor = '#ffffff';
valP.style.color = '#FF0000 ';
valP.style.visibility = 'visible';
valP.style.width = '302px';
valP.style.marginBottom = '7px';
if (valN.value == "")
{
valP.innerHTML = "First Name cannot be empty!";
}
else if (!isNaN(valN.value))
{
valP.innerHTML = "First Name cannot be numbers!";
}
else if (valN.length > 25)
{
valP.innerHTML = "First Name cannot be more than 25 characters!";
}
return;
}
function norml(valN, valR)
{
valN.style.borderColor = '#d6d6d6';
valN.style.color = '#000000';
valR.style.visibility = 'hidden';
valR.style.marginBottom = '0px';
valR.style.innerHTML = '';
valR.style.height = '0px';
}
function validate() {
var errmsg = "";
var result = true;
var fname = document.getElementById("fn").value;
if (!fname.match(/^[a-zA-Z]+$/))
{
chk(document.getElementById("fn"), document.getElementById("fnp"));
// document.getElementById("fn").addEventListener("onkeyup", function(){document.getElementById("fnp").innerHTML = "Hello World";});
document.getElementById("fn").onkeyup = function(){norml(document.getElementById("fn"), document.getElementById("fnp"));};
return false;
}
var lname = document.getElementById("ln").value;
if (!lname.match(/^[a-zA-Z]+$/))
{
chk(document.getElementById("ln"), document.getElementById("lnp"));
document.getElementById("ln").onkeyup = function(){norml(document.getElementById("ln"), document.getElementById("lnp"));};
return false;
}
if (errmsg != ""){ //only display message box if there is something to show
alert(errmsg);
}
}
function init()
{
var formData = document.getElementById("enqForm");
formData.onsubmit = validate;
}
window.onload = init;