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.

HTML Code:

<!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:

Code:

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:

HTML Code:

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

The full code is as follows:

HTML Code:

<!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.

Code:

<!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:

Code:

<!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.

Thread: Field Validation and images

Thread Tools

Search Thread

Field Validation and images

Bookmarks

Bookmarks

Posting Permissions