Jump to content

display quirks using innerHTML

feck

By feck
in JavaScript

Recommended Posts

feck Member

feck

Posted
Posted

Hi,I'm messing around with coding a simple validation for checking missing values in a form.I'm using divs to display error messages underneath every input using display:none or display:block depending on if an error is detected.I'm also using a loop to scroll through the form elements and check these values, if a missing value is found the error displays in underneath telling the user that this is missing.In IE everything works fine and shows all the errors after every button click, in firefox all the errors display for a second and then disappear.Why is this?

for (i=0;i<elemValues.length; i++ )//scrolls through the form elements	{					if(elemValues[i].value == ""){ //Checks to see if values are empty			var errorID = "error_" + elemValues[i].id;									document.getElementById(errorID).innerHTML = elemValues[i].id +' is required!';			document.getElementById(errorID).style.display = 'block';		}	}

Link to comment
Share on other sites
Reg Edit Member

Reg Edit

Posted
Posted
Hi,I'm messing around with coding a simple validation for checking missing values in a form.I'm using divs to display error messages underneath every input using display:none or display:block depending on if an error is detected.I'm also using a loop to scroll through the form elements and check these values, if a missing value is found the error displays in underneath telling the user that this is missing.In IE everything works fine and shows all the errors after every button click, in firefox all the errors display for a second and then disappear.Why is this?
for (i=0;i<elemValues.length; i++ )//scrolls through the form elements	{					if(elemValues[i].value == ""){ //Checks to see if values are empty			var errorID = "error_" + elemValues[i].id;									document.getElementById(errorID).innerHTML = elemValues[i].id +' is required!';			document.getElementById(errorID).style.display = 'block';		}	}

From your description of what happens in FF, it's not that bit of code that has the problem. Can you post the html form please, and all the javascript it uses?
Link to comment
Share on other sites
feck Member

feck

Posted
  • Author
Posted

Dont know whats changed but this does not now work with IE.But heres the code:

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>What a Great Title</title><link rel="stylesheet" href="style.css" type="text/css" /><script src="validation3.js" type="text/javascript"></script></head><body><div id="wrap">	<div id="head">		<h1>This is a Header</h1>	</div> <!-- end of 'head' div -->	<div id="torso">		<div id="leftnav">			<form action="" method="post">				<fieldset id="nav">					<p>					<label for="loguserID">User Name:</label>					<input type="text" name="loguserID" id="loguserID" /><br/>					<label for="logpassword">Password:</label>					<input type="password" name="logpassword" id="logpassword" /><br/><br/>					<input type="submit" value="Login" onclick="return Validate(this.form)"/>					</p>				</fieldset>			</form>		</div> <!-- end of 'leftnav' -->		<div id="main">					<form action="" method="post">				<fieldset id="signup">				<h3>Register Here</h3><hr/>					<label for="firstname">First Name:</label>					<input type="text" name="firstname" id="firstname" /><br />					<div class="error_show" style="display:none;color:red; font-size:.8em;" id = "error_firstname"></div>					<label for="surname">Surname:</label>					<input type="text" name="surname" id="surname" /><br />					<div class="error_show" style="display:none;color:red; font-size:.8em;" id = "error_surname"></div>					<label for="address">Address:</label>					<textarea rows="10" cols="25" id="address"></textarea><br />					<div class="error_show" style="display:none;color:red; font-size:.8em;" id = "error_address"></div>					<label for="userID">User name:</label>					<input type="text" name="userID" id="userID" /><br />					<div class="error_show" style="display:none;color:red; font-size:.8em;" id = "error_userID"></div>					<label for="password">Password:</label>					<input type="password" name="password" id="password" /><br />					<div class="error_show" style="display:none;color:red; font-size:.8em;" id = "error_password"></div>					<label for="email">Email:</label>					<input type="text" name="email" id="email" /><br />					<div class="error_show" style="display:none;color:red; font-size:.8em;" id = "error_email"></div>					<input type="checkbox" id="hideMail"/>Would you like to hide your email?<br /><br />					<input type="submit" value="Sign Up Now" id="subbutton" onclick="return Validate(this.form)"/>					<hr/>				</fieldset>			</form>		</div> <!-- end of 'main' div -->	</div> <!-- end of 'torso' div -->		<div id="foot">			<h1>This is the footer!							</h1>		</div><!-- end of 'foot' div -->	</div> <!-- end of wrap div --></body></html>

And heres the full java script:

function Validate(theForm){			var elemValues = theForm.elements;	var idArray = new Array("firstname", "surname", "address", "userID", "password", "email");		//Clear errors	//some code to go here to delete the errors which i have deleted for the sake of this problem			for (i=0;i<elemValues.length; i++ )//scrolls through the form elements	{			alert("hello" + elemValues.[id]);		if(elemValues[i].value == ""){ //Checks to see if values are empty			var errorID = "error_" + elemValues[i].id;									document.getElementById(errorID).innerHTML = elemValues[i].id +' is required!';			document.getElementById(errorID).style.display = 'block';		}	}}

For some reason if i place random alerts in the javascript the errors show one by one and then dissappear after all the errors are shown.I know its checking the button for a value at the end but why does it refresh the page once more.Also a question, every time the javascript reads the document.getElementById statements in the for loop does the entire page refresh or is it stored until the end of the loop. I'm just thinking out loud because i'm beginning to suspect it cant be done the way i'm trying to attempt it, or its something so incredibly simple I'm overlooking it.Anyway see if you can find the cause of the errors not showing on the page.

Link to comment
Share on other sites
Reg Edit Member

Reg Edit

Posted
Posted
[...] I know its checking the button for a value at the end but why does it refresh the page once more [...]
You just need to return true or false from the validation function. Currently it's not returning false, so the submit goes ahead and the page refreshes. Try something like this (isValid variable added):
function Validate(theForm){			var elemValues = theForm.elements;	var idArray = new Array("firstname", "surname", "address", "userID", "password", "email");		//Clear errors	//some code to go here to delete the errors which i have deleted for the sake of this problem	var isValid = true; 		for (i=0;i<elemValues.length; i++ )//scrolls through the form elements	{   		if(elemValues[i].value == ""){ //Checks to see if values are empty					isValid = false;						var errorID = "error_" + elemValues[i].id;								   document.getElementById(errorID).innerHTML = elemValues[i].id +' is required!';		   document.getElementById(errorID).style.display = 'block';		}	}		return isValid;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...