validate input without receiving focus

[nathj]

Hi,

I have been looking around the forum and the web for a way to achieve this and so far I have drawn a blank. So I head to the forum as I'm sure someone knows how to do this.

I have a form which I validate as the user enters data, this is straight forward enough. Part of the validation ensures that all mandatory fields are entered before the continue button is enabled.
(unfortunately this is a development site at present and so I can't show it to you). The form uses the onchange event to fire my javascript. Each mandatory item is labelled with red text which changes to black once it has been verified.

However, and here's the tricky part, I am using a third party service on the site that retrieve address information based on UK postcodes. Once an address is selected the relevant fields are populated.

How do I validate these fields so that the user can see they have been approved? I have looked through the event list on W3C and none of them seem to handle this. They most likely candidates require the user to navigate through the fields. If I were completing the form I would want to be able to click the button as soon as the data were entered.

Any idea on how to call the validation of input fields that do not receive the focus?

Example 1 - with onchange, not auto populated

<input id="title" type="text" maxlength="15" size="47" onchange="validateItem('titlelabel',this.value,'Title:',0,false,5)" title="Title - 15 characters" />

Example 2 - Javascript function

function validateItem(pcID,pcItem,pcDisplay,pnType,plPopulateExtra,pnNumberOfItems)	
{	

	var lcRegExp, llIsValid, llUseRegExp
	llIsValid = false 
	llUseRegExp = false
	switch (pnType)
	{
		case 1:	// UK postcode
			pcItem = pcItem.toUpperCase() 	
			lcRegExp = '^[A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA$' 
			llUseRegExp = true
			break;
		case 2: // email address
			lcRegExp = '^[_A-Za-z0-9-]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9-]+)*$'
			llUseRegExp = true			
			break;
		case 3: // number of set length - basic telephone number check
			lcRegExp = '^[0-9]{6,11}$'											
			llUseRegExp = true			
			break;
		case 4: // password validation - alpha numeric characters 6-18 characters long
			lcRegExp = '^[A-Za-z0-9]{6,18}$' 
			llUseRegExp = true			
			break;
	}		 
	if (llUseRegExp)
	{
		if (pcItem.match(lcRegExp))
		{	
			llIsValid = true
		}
		else
		{			  
			llIsValid = false
		}
	}	
	else
	{				 
		if (pcItem == null||pcItem == ""||pcItem.length < 2)
		{
			llIsValid = false
		}
		else
		{
			llIsValid = true
		}	 
	}

	if (llIsValid)								
	{				
		document.getElementById(pcID).innerHTML = pcDisplay
		if (gnValidationCount >= 1)
		{
			gnValidationCount = gnValidationCount - 1
		}
	}
	else
	{	
		document.getElementById(pcID).innerHTML = "<span class='warninglabel'>" + pcDisplay + "</span>"
		if (gnValidationCount <= pnNumberOfItems)
		{
			gnValidationCount = gnValidationCount + 1
		}
	}	 
	
	if (gnValidationCount == 0)	
	{
		hideOrShowInput("complete",false)	
	}
	else
	{
		hideOrShowInput("complete",true)	
	}	
	if (plPopulateExtra)
	{
		 populateExtra(lcSource, lcDestination, true, true)
	}  
}

note gnValidationCou nt is set at the top of the page as 'global' variable.

Any help on how to call the function without accessing the controls would be greatly appreciated.

Many thanks
nathj

[acoder]

You could always call a validation function onsubmit.

How are these fields populated? When the value changes, the onchange should fire.

[nathj]

You could always call a validation function onsubmit.

How are these fields populated? When the value changes, the onchange should fire.

Hi there,

I am using the code from Allies Computing - SOAP Web Service Postcode search, and as far as I can tell the following lines make the change:

	// update the main address form with the correctly formatted, selected address.
	parent.document.contactDetails.organisation.value = jsaddressList[num][0];
	parent.document.contactDetails.address1.value = address[0];
	parent.document.contactDetails.address2.value = address[1];
	parent.document.contactDetails.address3.value = address[2];
	parent.document.contactDetails.address4.value = address[3];
	parent.document.contactDetails.town.value = jsaddressList[num][6];
	parent.document.contactDetails.county.value = jsaddressList[num][7];
	parent.document.contactDetails.postcode.value = jsaddressList[num][8];

This is inside a JavaScript function as far as I can tell.

Many thanks
Nathan

[nathj]

Hi,

Further information and a sample test.

This code is a simplistic overview of my problem:


[HTML]<html>

<head>
<script type="text/javascript">

function upperCase(x)
{
document.getEle mentById(x).val ue=document.get ElementById(x). value.toUpperCa se()
document.getEle mentById('testl abel').innerHTM L = "Test Label"
}
function populate()
{
document.getEle mentById('fname ').value="testi ng onchange"
}
</script>
</head>

<body>
<input type="button" value="Test" onclick="popula te();">
<p id="testlabel"> Enter your name:</p> <input type="text" id="fname" onblur="upperCa se(this.id)">

</body>
</html>
[/HTML]

If you run this and click the button, you will see the text box populate but not switch to uppercase until focus passes through it. If the onblur is switched to onchange the function to convert to uppercase is not called until you type into the box..

This is a simplistic summary of the problem. I need to be able to call a function on a text box once it has been populated by a separate function. I have tried running the call from the separate function but as I am writing back to a label on a different page it doesn't seem to work.

Does anyone know how to write this so that, in the above example, the label changes as soon as the button is clicked - without adding the code to the button onclick as that is not a possibility in the real live situation?

Many thanks
nathj

[gits]

hi ...

what about calling:

[CODE=javascript]upperCase('fnam e');[/CODE]
within your populate function?

kind regards ...

[nathj]

The problem has been solved. Many thanks to every one who helped. The code below is the code that was supplied by the third party and it populates the controls I need to validate.

	// update the main address form with the correctly formatted, selected address.
	parent.document.contactDetails.organisation.value = jsaddressList[num][0];
	parent.document.contactDetails.address1.value = address[0];
	parent.document.contactDetails.address2.value = address[1];
	parent.document.contactDetails.address3.value = address[2];
	parent.document.contactDetails.address4.value = address[3];
	parent.document.contactDetails.town.value = jsaddressList[num][6];
	parent.document.contactDetails.county.value = jsaddressList[num][7];
	parent.document.contactDetails.postcode.value = jsaddressList[num][8];

After this code I added the following two lines:

[PHP]
parent.document .contactDetails .address1.oncha nge();
parent.document .contactDetails .postcode.oncha nge();
[/PHP]

Now it all works lovely jubbly. I also think that I did a poor job of explaining my problem but your clear responses helped me to get a better focus on it. Once again this place comes to my rescue.

Cheers
nathj