Jump to content

Showing Multiple Errors on different P elements same time


touqeer9045

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...