Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

validate before submit problem

Status
Not open for further replies.

tomvdduin

Programmer
Sep 29, 2002
155
NL
This is surely the 100th problem with validate functions before a form is submitted, but the others doesn't help me:

I have a form, witch, at the opening of the page, does have dynamically assigned the 'onblur' property using:

Code:
function addEvents(formName, onWhat)
{		
  theForm = document.getElementById(formName, onWhat)
	
  if (theForm == null)
    return;
		
  for (x=0; x<theForm.elements.length; x++)
    theForm.elements[x].attachEvent(onWhat, eval(onWhat+'Function'))
}	

function onblurFunction()
{
  myFormField = event.srcElement;

  if (myFormField.name == 'ABO_PK' || myFormField.name == 'SRE_PK' || myFormField.name == 'SRE_HNR1')
    if (!isInteger(myFormField.value))
      showFalseField(myFormField, '<?php echo __BORDERINCORRECTFIELD ?>');
    else
      showGoodField(myFormField, '<?php echo __BORDERCORRECTFIELD ?>');

  if (myFormField.name == 'SRE_PC')
    myFormField.value = checkPostcode(myFormField.value);
			
}
function showFalseField(veld, border)
{
  veld.focus();
  veld.style.border = border;
}

function showGoodField(veld, border)
{
  veld.style.border = border;
}

This works perfectly. when the user enters a character into a field where normally there only can ben numbers, the border of the field will become red, and the user must correct his fault before he can go to an other field.

also, when a field has a yellow backgrond color, the field is required, so I have a function called beforeSubmit that checks for yellow fields.
It also performs the check for a red bordercolor using the function above, because although a user cannot go out of the field with a wrong value, it do can click on the submit button. code:

Code:
function beforeSubmit(formName, requiredFieldBgColor)
{
  theForm = document.getElementById(formName);
  for (x=0; x<theForm.elements.length; x++)
  {
    if (theForm.elements[x].style.background == requiredFieldBgColor && theForm.elements[x].value == '')
    {
      alert("You have some required (yellow) fields without a value.");
      return false;
    }
    if (theForm.elements[x].style.border == 'red 2px solid')
    {
      alert ("You have a field witch contains a wrong value (with a red border).");
      return false;
    }
  }
	
  return true;
}

The problem is, that when a user enters a wrong value into a field an presses enter instead of click the submit button, the validation function is not called.

This is what the form looks like:
Code:
<form action="index2.php" method="POST" name="zoek_form">

Abonnementnummer:<br>
<input type="text" name="ABO_PK" class="text" style="width: 200px;"><br><br>

Relatienummer:<br>
<input type="text" name="SRE_PK" class="text" style="width: 200px;"><br><br>

Naam:<br>
<input type="text" name="SRE_ZK" class="text" style="width: 200px;"><br><br>
	
<table border="0" cellpadding="0" cellspacing="0">
<tr>
  <td>
  Postcode:<br>
  <input type="text" name="SRE_PC" value maxlength="7" class="text" style="width: 70px;">
  </td>
  <td width="10">&nbsp;</td>
  <td>Huisnummer:<br>
  <input type="text" name="SRE_HNR1" class="text" style="width: 60px;">
  </td>
</tr>
</table>
<br>
Telefoonnummer:<br>
<input type="text" name="SRE_TEL" class="text" style="width: 200px;">
<br>

Zoeken op:<br>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
  <td width="120">
  <input type="radio" name="abo_deb" value="abo" checked>Abonnee
  </td>
  <td>
  <input type="radio" name="abo_deb" value="deb">Debiteur
  </td>
</tr>
</table>
<br>

<input type="Submit" value="OK" onclick="return beforeSubmit('zoek_form', '<?php echo __REQUIREDFIELDBGCOLOR ?>')">
                                                                                      ^php variabele holding a bordercolor

I tried to rename the onclick function on the button to onsubmit, I even tried the onsubmit in the form tag, but nothing helps.

What am I doing wrong?

Tom
 
Remove onclick event from submit button. Then write:

Code:
<form action="index2.php" method="POST" name="zoek_form" [b]onsubmit="return beforeSubmit('zoek_form', '<?php echo __REQUIREDFIELDBGCOLOR ?>');"[/b]>

Btw. onblur can be problematic (infinite looping, unwanted firings etc).
 
Thanks for your help vongrunt, but I tried that already, and it doesn't work either. When I enter some text into a field that has to contain numbers and I press enter, it is submitted. Clicking the submit button although fires the validation check.

So still no luck, any other advice?
 
Yes... what about <form id='zoek_form'...>? You are using getElementById() to access form and Id is not defined.

If this doesn't work... there are many missing pieces of code (body onload, isInteger(), /form) so many things can go wrong. Send entire code - view source, without PHP stuff.

 
vongrunt, Tnx for your help! I really appriciate.

this is the source of the complete parsed page. I did a W3C check, and it says that the end tag for form is invalid, because it's not opened. The same for the last </table> and some <TD>'s. I'm not sure why the T3c validator says this, I don't see any open or wrong formatted tags.

this is the source of the page:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<LINK type="text/css" rel="stylesheet" rev="stylesheet" href="style/styles.css">
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

	
<SCRIPT LANGUAGE="JavaScript">
<!--

function setAbonnement(SRE_PK, SRE_SRE_PK, abonnement, etiket, etiket_debiteur)
{
	opener.setAbonnement(SRE_PK, SRE_SRE_PK, abonnement, etiket, etiket_debiteur);
}	
//-->
</SCRIPT>

<SCRIPT src="js/formatEtiket.js" type="text/javascript"></SCRIPT>
<SCRIPT src="js/explodeArray.js" type="text/javascript"></SCRIPT>
<SCRIPT src="js/addEvents.js" type="text/javascript"></SCRIPT>
<SCRIPT src="js/formCheckFunctions.js" type="text/javascript"></SCRIPT>
<SCRIPT src="js/capitaliseAllWords.js" type="text/javascript"></SCRIPT>

<SCRIPT language="JavaScript" type="text/javascript">

function onblurFunction()
{
	myFormField = event.srcElement; //object van het veranderde element

	if (myFormField.name == 'ABO_PK' || myFormField.name == 'SRE_PK' || myFormField.name == 'SRE_HNR1')
		if (!isInteger(myFormField.value))
			showFalseField(myFormField, '2px solid Red');
		else
			showGoodField(myFormField, '1px solid Black');

		if (myFormField.name == 'SRE_PC')
		myFormField.value = checkPostcode(myFormField.value);
			
}

</SCRIPT>
</head>
<body background="images/background.gif" onload="addEvents('zoek_form', 'onblur')">

<table cellspacing="0" cellpadding="0" border="1" align="center">
<tr>
    <th background="images/table_header_left.gif" width="20" height="27"></th>
	<th background="images/table_header_middle.gif" width="400" height="27">Zoeken abonnement</th>

    <th background="images/table_header_right.gif" width="20" height="27"></th>
    <th width="210"></th>
</tr>
<tr>
    <td class="topleft">&nbsp;</td>
    <td class="topright" colspan="3"><br>
<!-- --------------------------------------------- VOOR POST -------------------------------------------------- -->
	<p class="kop1">Voer onderstaande gegevens in <br> om te controleren of het abonnement reeds bestaat:</p><br>
	<table border="1">
	<tr>
		<td width="20">&nbsp;</td>
		<td>

			<form action="/zeno2l/abonnement.zoek.php?action=wijzig&sid=1fced63b7ba3353f2c82d1ab68c71c33" method="POST" id="zoek_form" name="zoek_form" onsubmit="return beforeSubmit('zoek_form', '#feff6a');">
			<!-- voeg dit toe als style bij een veld om hem verplicht te maken:  background=#feff6a -->
			Abonnementnummer:<br>
			<input type="text" name="ABO_PK" class="text" style="width: 200px;"><br><br>
		
			Relatienummer:<br>
			<input type="text" name="SRE_PK" class="text" style="width: 200px;"><br><br>
		
			Naam:<br>
			<input type="text" name="SRE_ZK" class="text" style="width: 200px;"><br><br>
			
			<table border="1" cellpadding="0" cellspacing="0">
			<tr>
				<td>
				Postcode:<br>
				<input type="text" name="SRE_PC" maxlength="7" class="text" style="width: 70px;">
				</td>
				<td width="10">&nbsp;</td>
				<td>Huisnummer:<br>
				<input type="text" name="SRE_HNR1" class="text" style="width: 60px;">
				</td>
			</tr>
			</table>
			<br>
			Telefoonnummer:<br>
			<input type="text" name="SRE_TEL" class="text" style="width: 200px;">
			<br>
			Zoeken op:<br>
			<table border="1" cellpadding="0" cellspacing="0">
			<tr>
				<td width="120">
				<input type="radio" name="abo_deb" value="abo" checked>Abonnee
				</td>
				<td>
				<input type="radio" name="abo_deb" value="deb">Debiteur
				</td>
			</tr>
			</table>
			<br>
			<input type="Submit" value="&nbsp;&nbsp;OK&nbsp;&nbsp;">
			</form>
			<br><br>
		</td>
	</tr>
	</table>
		</td>
</tr>

<tr>
    <td class="bottomleft">&nbsp;</td>
    <td class="bottomright" colspan="3">&nbsp;</td>
</tr>
</table>

</body>
</html>

Tnx a lot!
 
Problems so far:

- field validation triggers only for current field when it loses focus
- if I click "OK" (or hit Enter) and validation passes OK, other fields will not be checked
- when I click to another field and validation fails, IE hangs (onblur executes showFalseField(), focus() fires onblur...).
- proper work of beforeSubmit() depends on CSS runtime styles - kinda dirty

IMO some of these problems are conceptual, some are caused by implementation (onblur is "noisy" event and cannot be cancelled). The simplest suggestion should be: validate all fields onsubmit. Additionally you can cancel Enter key inside form through onkeydown event.
 
vongrunt,

I disagree with you:
- I use the onblur event because it much userfriendly to direct show an inproper value. I intensionally want to do that onblur, not onsubmit.
- onsubmit, it only has to validate 'yellow' fields, I don't think it's dirty, because the color of the field is generated in PHP, so nowhere you can find the colorcode in the source, exept in a php config file.
- because when a user enters a wrong value in a field and directly clicks on submit, it also has to check for inproper fields
- the loop you describe does not occur, because of the focus(), the onblur event is not triggered!

the only thing i ran into is hitting the enter key direct after inserting an inproper value. that's solved now because it's disabled...

Thanks for your help!

Tom
 
Yes, onblur is somewhat more user-friendly and some users appreciate that.

What I tried to point is: onblur fires way too much. When you hit Alt-Tab, Tab/Shift-Tab, submit form, move focus somewhere else w/mouse... It can be also indirectly invoked by other methods like focus(). More often than not this runs out of control. To check this in your example:

- enter non-numeric value in "Relatienummer", then click w/ mouse on "Abonnementnummer" (my IE6 hanged after that)
- focus into "Naam" field (no validations) then click "OK". Validation for "Huisnummer" won't happen.

IMO onchange event is better for that purpose. Still there are are no guarantees that user won't skip some validations with mouse.
 
I get your point, but the problems you run into, don't happen with me!

I entered a non-nummeric value in "relatienummer", then clicked on "abonnementnummer". I too have IE6, but it doesn't hang! You can't go to another field, but when you correct the error, the red border will go away and you're free to go!

I don't get your second point also. All the validations also happens when a user clicks on OK! beside that, you can't focus into "naam", because the validation fails in huisnummer, so you can't focus into another field.

I'm from The Netherlands therefore my app is in Dutch, hope you can read it...

naam = name
nummer = number
in some points Dutch is near to English...
 
> I don't get your second point also. All the validations also happens when a user clicks on OK! beside that, you can't focus into "naam", because the validation fails in huisnummer, so you can't focus into another field.

I see the logic behind - onblur validates field "in place", beforesubmit checks required and invalidated fields. Should work, except at both my machines first case hangs IE. Time to reinstall?

OK, I won't preach. If things work well for you, glad to hear it.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top