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
- <input id="title" type="text" maxlength="15" size="47" onchange="validateItem('titlelabel',this.value,'Title:',0,false,5)" title="Title - 15 characters" />
Expand|Select|Wrap|Line Numbers
- 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)
- }
- }
Any help on how to call the function without accessing the controls would be greatly appreciated.
Many thanks
nathj