Jump to content

touqeer9045

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

touqeer9045's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. touqeer9045
    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;
×
×
  • Create New...