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;
Showing Multiple Errors on different P elements same time
in JavaScript
Posted
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;