Log in

View Full Version : Field Validation and images


n0131378
11-05-2008, 05:03 PM
Hi all,

I'm new to these forums, I'm a novice with java script, and I'm having some trouble with field validation:

I have an order form that I'm attempting to validate, I have set up a couple of functions using javascript to validate the form, where the input is erronious a cross image is displayed to indicate that the field is incorrect.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language = "javascript" type = "text/javascript">
function showCross(theId)
{
var cross.src = "<img src="tick/cross.gif" height = "20" width = "20">";
var errorImage = document.getElementById(theId+"_error");
errorImage.innerHTML = cross.src;
}

function Mem_Title()
{
if (gF('member_title').value == "")
{
showCross();
}
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="656">
<tr>
<td class="col2">Title</td>
<td class="col3"></td>
<td class="col4"><select name="member_title" id="member_title" style="width: 100px;" onblur="Mem_Title()">
<option value="">Select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
</select>
</td>
<td class="col5">&nbsp;<span id="member_title_error"></span></td>
</tr>
</table>
</body>
</html>

However I get a javascript error each time I load the page, can anyone help?

Thanks in Advance
Moshambi
11-05-2008, 05:11 PM
Hello there!

I can se that one of your problems is that in your function:



function Mem_Title()
{
if (gF('member_title').value == "")
{
showCross();
}
}



You are making a call to showCross();

The problem is that your showCross() function needs to take a parameter function showCross(theId)

Try passing a parameter to it and see if that helps it work. If not I will try to further assist you.

Hope this Helps!


EDIT: I just realized there are a lot more problems, I am trying to figure them out now, but I am just curious where or what is the gF() function?
n0131378
11-05-2008, 05:22 PM
Hi, Apologies, I removed the field name i was passing to play around with the code, here is the full function code:


function Mem_Title()
{
if (gF('member_title').value == "")
{
showCross('member_title');
}
}

The full code is as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language = "javascript" type = "text/javascript">
function showCross(theId)
{
var cross.src = "<img src="tick/cross.gif" height = "20" width = "20">";
var errorImage = document.getElementById(theId+"_error");
errorImage.innerHTML = cross.src;
}

function Mem_Title()
{
if (gF('member_title').value == "")
{
showCross('member_title');
}
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="656">
<tr>
<td class="col2">Title</td>
<td class="col3"></td>
<td class="col4"><select name="member_title" id="member_title" style="width: 100px;" onblur="Mem_Title()">
<option value="">Select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
</select>
</td>
<td class="col5">&nbsp;<span id="member_title_error"></span></td>
</tr>
</table>
</body>
</html>
Moshambi
11-05-2008, 05:31 PM
Ok I am not sure exactly what you are going for so I made this little demo (cuz I think this is what you are looking to do...)

If this is what you are looking for then let me know and I can help you modify it to your needs.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language = "javascript" type = "text/javascript">

function validate(elem, errorId)
{
if(document.getElementById(elem).value == "")
{
document.getElementById("error_" + errorId).innerHTML = "<img src='cross.gif' />";
}
}

</script>
</head>
<body>

<div id="formdata">

Name: <span id="error_1"></span><input type="text" id="txtName" onblur="javascript: validate('txtName', 1);" /><br />

</div>

</body>
</html>


This is just a simple name field that if left blank will pop up the little cross image...
n0131378
11-05-2008, 05:48 PM
Hi there,

I just tried out the code, and thats fantastic, its almost exactly what i want to do.

However, I have quite a large order form.

I want to be able to pass the name of the origin field (eg. member_name) then apply field validation (as a seperate function).

If the field is invalid I want the big cross to be displayed in the <field name> + <_error> which is a different field (e.g member_name_error) within my original table.

Thanks again for the help!!!!
Moshambi
11-05-2008, 06:02 PM
okay I thought that might be what you were looking for :)

Ok now you can just create a function for each check, like checkAddress(), checkName(), checkZip() etc. etc.

I have done this for two fields ( checkName() and checkZip() ) in the following example:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language = "javascript" type = "text/javascript">

function validateError(errorId)
{
document.getElementById(errorId + "_error").innerHTML = "<img src='cross.gif' />";
}

function fixedError(errorId)
{
document.getElementById(errorId + "_error").innerHTML = "";
}

function checkName(elem)
{
if(document.getElementById(elem).value != "Name")
{
validateError("name");
}
else
{
fixedError("name");
}
}

function checkZip(elem)
{
if(document.getElementById(elem).value != "12345")
{
validateError("zip");
}
else
{
fixedError("zip");
}
}

</script>
</head>
<body>

<div id="formdata">

Name: <span id="name_error"></span><input type="text" id="txtName" onblur="javascript: checkName('txtName');" /><br />
Zip: <span id="zip_error"></span><input type="text" id="txtZip" onblur="javascript: checkZip('txtZip');" /><br />
</div>

</body>
</html>


I also made it so in this example that if they go back and fix the error it will remove the cross using the function fixedError(errorId)

Hope this helps a bit more and is making sense to you.