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

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

[gits]

hi ...

what about calling:

upperCase('fname');

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