touqeer9045 Posted May 1, 2016 Share Posted May 1, 2016 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; Link to comment Share on other sites More sharing options...
davej Posted May 2, 2016 Share Posted May 2, 2016 This might be closer to what you want. <!DOCTYPE html> <html lang="en"> <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> function chk(idfield) { var fieldvalue = document.getElementById(idfield).value.trim(); var errmsg = ""; if (fieldvalue == "") { errmsg += "Field cannot be empty!"; } else if (!isNaN(fieldvalue)) { errmsg += "Field cannot be numbers!"; } else if ( !fieldvalue.match(/^[a-zA-Z]+$/) ) { errmsg += "Field has bad characters!"; } else if (fieldvalue.length > 25) { errmsg += "Field cannot be more than 25 characters!"; } return errmsg; } function norml(idfield, iderrfield) { document.getElementById(idfield).style.color = ''; document.getElementById(iderrfield).innerHTML = ''; document.getElementById(idfield).onkeyup = ''; } function validate() { var fnerrors = chk("fn"); if (fnerrors != ""){ var field1 = document.getElementById("fn"); field1.style.color = '#f00'; field1.onkeyup = function(){ norml( "fn", "fnerrs" );}; } var lnerrors = chk("ln"); if (lnerrors != ""){ var field2 = document.getElementById("ln"); field2.style.color = '#f00'; field2.onkeyup = function(){ norml( "ln", "lnerrs" );}; } if (fnerrors != "" || lnerrors != ""){ document.getElementById("fnerrs").innerHTML = fnerrors; document.getElementById("lnerrs").innerHTML = lnerrors; return false; //prevent form submission if error was detected }else{ alert('allowing form submission'); } } function init() { document.getElementById("enqForm").onsubmit = validate; } window.onload = init; </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> <table><tr> <td><input id="fn" type="text" name="firstname" placeholder="First Name *" /></td> <td><input id="ln" type="text" name="lastname" placeholder="Last Name *" /></td> </tr><tr> <td style="color:#f00;" id="fnerrs"></td> <td style="color:#f00;" id="lnerrs"></td> </tr></table> <input id="sendbutton" type="submit" value="Enquire" /> </div> </form> </div> </section> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now