469,602 Members | 1,709 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,602 developers. It's quick & easy.

validate input without receiving focus

nathj
938 Expert 512MB
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
Expand|Select|Wrap|Line Numbers
  1. <input id="title" type="text" maxlength="15" size="47" onchange="validateItem('titlelabel',this.value,'Title:',0,false,5)" title="Title - 15 characters" />
  2.  
Example 2 - Javascript function
Expand|Select|Wrap|Line Numbers
  1. function validateItem(pcID,pcItem,pcDisplay,pnType,plPopulateExtra,pnNumberOfItems)    
  2. {    
  3.  
  4.     var lcRegExp, llIsValid, llUseRegExp
  5.     llIsValid = false 
  6.     llUseRegExp = false
  7.     switch (pnType)
  8.     {
  9.         case 1:    // UK postcode
  10.             pcItem = pcItem.toUpperCase()     
  11.             lcRegExp = '^[A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA$' 
  12.             llUseRegExp = true
  13.             break;
  14.         case 2: // email address
  15.             lcRegExp = '^[_A-Za-z0-9-]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9-]+)*$'
  16.             llUseRegExp = true            
  17.             break;
  18.         case 3: // number of set length - basic telephone number check
  19.             lcRegExp = '^[0-9]{6,11}$'                                            
  20.             llUseRegExp = true            
  21.             break;
  22.         case 4: // password validation - alpha numeric characters 6-18 characters long
  23.             lcRegExp = '^[A-Za-z0-9]{6,18}$' 
  24.             llUseRegExp = true            
  25.             break;
  26.     }         
  27.     if (llUseRegExp)
  28.     {
  29.         if (pcItem.match(lcRegExp))
  30.         {    
  31.             llIsValid = true
  32.         }
  33.         else
  34.         {              
  35.             llIsValid = false
  36.         }
  37.     }    
  38.     else
  39.     {                 
  40.         if (pcItem == null||pcItem == ""||pcItem.length < 2)
  41.         {
  42.             llIsValid = false
  43.         }
  44.         else
  45.         {
  46.             llIsValid = true
  47.         }     
  48.     }
  49.  
  50.     if (llIsValid)                                
  51.     {                
  52.         document.getElementById(pcID).innerHTML = pcDisplay
  53.         if (gnValidationCount >= 1)
  54.         {
  55.             gnValidationCount = gnValidationCount - 1
  56.         }
  57.     }
  58.     else
  59.     {    
  60.         document.getElementById(pcID).innerHTML = "<span class='warninglabel'>" + pcDisplay + "</span>"
  61.         if (gnValidationCount <= pnNumberOfItems)
  62.         {
  63.             gnValidationCount = gnValidationCount + 1
  64.         }
  65.     }     
  66.  
  67.     if (gnValidationCount == 0)    
  68.     {
  69.         hideOrShowInput("complete",false)    
  70.     }
  71.     else
  72.     {
  73.         hideOrShowInput("complete",true)    
  74.     }    
  75.     if (plPopulateExtra)
  76.     {
  77.          populateExtra(lcSource, lcDestination, true, true)
  78.     }  
  79. }    
  80.  
note gnValidationCount 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
Jun 28 '07 #1
5 2275
acoder
16,027 Expert Mod 8TB
You could always call a validation function onsubmit.

How are these fields populated? When the value changes, the onchange should fire.
Jun 28 '07 #2
nathj
938 Expert 512MB
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:
Expand|Select|Wrap|Line Numbers
  1.     // update the main address form with the correctly formatted, selected address.
  2.     parent.document.contactDetails.organisation.value = jsaddressList[num][0];
  3.     parent.document.contactDetails.address1.value = address[0];
  4.     parent.document.contactDetails.address2.value = address[1];
  5.     parent.document.contactDetails.address3.value = address[2];
  6.     parent.document.contactDetails.address4.value = address[3];
  7.     parent.document.contactDetails.town.value = jsaddressList[num][6];
  8.     parent.document.contactDetails.county.value = jsaddressList[num][7];
  9.     parent.document.contactDetails.postcode.value = jsaddressList[num][8];
  10.  
This is inside a JavaScript function as far as I can tell.

Many thanks
Nathan
Jun 28 '07 #3
nathj
938 Expert 512MB
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.getElementById(x).value=document.getEleme ntById(x).value.toUpperCase()
document.getElementById('testlabel').innerHTML = "Test Label"
}
function populate()
{
document.getElementById('fname').value="testing onchange"
}
</script>
</head>

<body>
<input type="button" value="Test" onclick="populate();">
<p id="testlabel">Enter your name:</p> <input type="text" id="fname" onblur="upperCase(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
Jun 29 '07 #4
gits
5,390 Expert Mod 4TB
hi ...

what about calling:

Expand|Select|Wrap|Line Numbers
  1. upperCase('fname');
within your populate function?

kind regards ...
Jun 29 '07 #5
nathj
938 Expert 512MB
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.
Expand|Select|Wrap|Line Numbers
  1.     // update the main address form with the correctly formatted, selected address.
  2.     parent.document.contactDetails.organisation.value = jsaddressList[num][0];
  3.     parent.document.contactDetails.address1.value = address[0];
  4.     parent.document.contactDetails.address2.value = address[1];
  5.     parent.document.contactDetails.address3.value = address[2];
  6.     parent.document.contactDetails.address4.value = address[3];
  7.     parent.document.contactDetails.town.value = jsaddressList[num][6];
  8.     parent.document.contactDetails.county.value = jsaddressList[num][7];
  9.     parent.document.contactDetails.postcode.value = jsaddressList[num][8];
  10.  
After this code I added the following two lines:

[PHP]
parent.document.contactDetails.address1.onchange() ;
parent.document.contactDetails.postcode.onchange() ;
[/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
Jun 29 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Jure Erznoznik | last post: by
2 posts views Thread by Basr | last post: by
3 posts views Thread by =?Utf-8?B?cHJvZ2dlcg==?= | last post: by
reply views Thread by devrayhaan | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.