JavaScript Forum

**Falcone** · 10-03-2008, 08:53 AM

this is the code (something basic)

Code:

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

function validateField(fld) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (fld.value == "") {
           fld.style.borderColor = 'red';         
        fld.parentNode.getElementsByTagName("span")[0].innerHTML = "You didn't enter a value.\n";        
        fld.focus();
        return false;
    } else if ((fld.value.length < 2) || (fld.value.length > 16)) {
        fld.style.borderColor = 'red';
        fld.parentNode.getElementsByTagName("span")[0].innerHTML = 'The field is the wrong length.';
        fld.focus();
        return false;
    } else if (illegalChars.test(fld.value)) {
        fld.style.borderColor = 'red';
        fld.parentNode.getElementsByTagName("span")[0].innerHTML = 'The field contains illegal characters.\n';         
        fld.focus();
        return false;
    } else {
        fld.style.border = 'none';
        fld.parentNode.getElementsByTagName("span")[0].innerHTML = "";                
        fld.parentNode.getElementsByTagName("span")[1].style.display = "none";  
        return true;      
    } 
}
</SCRIPT>
</head>
<body>
<form method="post">

<fieldset>
    <label for="field1">label1:</label>

    <input
        type="text"
        id="field1"
        name="field1"
        size="20"
        value=""
        onfocus='this.parentNode.getElementsByTagName("span")[1].style.display = "inline";'
        onblur='return validateField(this);' />&nbsp;
    <span style="position:absolute; left:350px; color:red;"></span><br/>
    <span class="hint" style="display:none;">
        hint 1</span>
</fieldset>
<fieldset>
    <label for="field2">label2:</label>
    <input
        type="text"
        id="field2"
        name="field2"
        size="20"
        value=""
        onfocus='this.parentNode.getElementsByTagName("span")[1].style.display = "inline";'
        onblur='return validateField(this);' />&nbsp;
    <span style="position:absolute; left:350px; color:red;"></span><br/>
    <span class="hint" style="display:none;">
        hint 2</span>
</fieldset>
</form>
</body>
</html>

the 'hint' appears when the field get the focus;

the field border becomes red and the error message appears when the field value doesn't pass the test, but the field looses the focus when an error occurs

the focus should stay in the field until the field value passes the field validation.

what is wron with this code here

some help please,

thx

**fsav** · 10-03-2008, 01:00 PM

As per the following thread:

http://codingforums.com/archive/index.php?t-56204.html

you need to add a slight delay when calling the focus() method:

setTimeout(function(){fld.focus()}, 10);

instead of

fld.focus().

Hope it works for you. Worked here.

**Falcone** · 10-04-2008, 05:57 AM

it returns the focus to field1 but it puts first the focus on the next field whats is resulting in an error message for the next field saying it is empty.

**fsav** · 10-04-2008, 01:21 PM

Well I'm not sure you can get the result you want, since you invoke your validateField function with the onblur event, which happens when the focus leaves the field...