onblur in form validation

[xso]

Hi,

I would like to validate form fields each time the user leaves the field (onblur event), instead of doing it at once, when the form is submited.

If something goes wring, a message should appear in an alert box, the bgcolor of the problematic field should be set to red and the focus should be set on the problematic field.

I tried to do it but I'm stuck on putting the focus. The validation works, the alert box is triggered, the bgcolor is changed but the focus is put on the next field, not on the problematic one, even if I write: fieldName.focus(); It does it with or without return false or return true.

Would anyone know how to keep the focus on the problematic field? Thanks in advance and cheers,

kobzar

 

[twcman]

Could you post your code for one of the fields?
The only dumb questions are the ones that are never asked

 

[xso]

Here we go:
<input class=&quot;style&quot; type=&quot;text&quot; name=&quot;usr_nm&quot; id=&quot;usr_nm&quot; size=&quot;20&quot; maxlength=&quot;30&quot; value=&quot;&quot; onblur=&quot;isFilled(1, 'Username');&quot; />

function isFilled(id, name)
{
if ((document.forms[0].elements[id].value == &quot;&quot || (document.forms[0].elements[id].value == null)) {
alert(&quot;The &quot; + name + &quot; field cannot be empty&quot;
document.forms[0].elements[id].className = 'fieldError';
document.forms[0].elements[id].focus();
return false;
} else {
document.forms[0].elements[id].className = 'style';
}
}

 

[onpnt]

try this line in place of your focus line
eval(&quot;document.forms[0].&quot; + name + &quot;.focus()&quot;
Just a suggestion: faq183-874

http://www.onpntwebdesigns.com

admin@onpntwebdesigns.com

 

[xso]

Nope. It does just the same thing: going on to the next field :-<

 

[onpnt]

interesting because it works here. what browser version are you using.
did you change it to this
function isFilled(id, name)
{
if ((document.forms[0].elements[id].value == &quot;&quot || (document.forms[0].elements[id].value == null)) {
alert(&quot;The &quot; + name + &quot; field cannot be empty&quot;
document.forms[0].elements[id].className = 'fieldError';
eval(&quot;document.forms[0].&quot; + name + &quot;.focus()&quot;
return false;
} else {
document.forms[0].elements[id].className = 'style';
}
} Just a suggestion: faq183-874

http://www.onpntwebdesigns.com

admin@onpntwebdesigns.com

 

[xso]

I just copied and paste your code and it still does not work :-< I'm using Opera 6, Mozilla 1.2 and Internet Explorer 6.

 

[xso]

The funny thing is that I hard coded the focus() in the body onload attribute. And it works: it focus on the right field. If I put it in the onblur function, it does everything to the field (like changing the css) but still jumps on to the next field. Arrgh.

 

[onpnt]

are you calling it like this
<input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; class=&quot;style&quot; onBlur=&quot;return isFilled('name', 'name')&quot;>

if not can you post the call event Just a suggestion: faq183-874

http://www.onpntwebdesigns.com

admin@onpntwebdesigns.com

 

[mwolf00]

I use a general onBlur in every form element and the parse it based on the first two letters of the field name. Then you can wriet a central handler for all form fields...

<script>
function blurSub(inField){
decoded = inField.name.substr(0,2)
if (inField.value != &quot;&quot{
//for IE
inField.style.background = &quot;white&quot;
}
switch(decoded){
case &quot;DA&quot;:
//valid date format function
break;
case &quot;IN&quot;
//valid integer function
break;
case &quot;DE&quot;
//valid decimal function
break;
default:
//no value needed
break;
}
if (alertMess != &quot;&quot{
//for IE
inField.style.background = &quot;yellow&quot;
alert(alertMess)
}
}
</script>

<form>
<input name=&quot;DA_hireDate&quot; onBlur=&quot;blurSub(this)&quot;>
<input name=&quot;IN_age&quot; onBlur=&quot;blurSub(this)&quot;>
<input name=&quot;XX_favoriteColor &quot; onBlur=&quot;blurSub(this)&quot;>

-----------------------------------------------------------------
Be nice. It's only doing what you tell it to do.
mikewolf@tst-us.com

 

[Tarwn]

Hmmm...ok, anyways


Why not use the document.getElementById method?

function isFilled(id, name)
{   
	var elem = document.getElementById(id);
    if ((elem.value == "") || (elem.value == null)) {
        alert("The " + name + " field cannot be empty");
        elem.className = 'fieldError';
        elem.focus();
        return false;
    } else {
        elem.className = 'style';
    }
}

Then rather than passing the id number (which is a little dangerous anyways, if anyone ever edits it the script will start checking the wrong element unless you put nice big warnings in there for them to change the numbers) you just pass it a string with the element id in it.

Another option would be to actually pass the object reference using this.
Then alter the javascript like so:

function isFilled(elem, name)
{   
    if ((elem.value == "") || (elem.value == null)) {
        alert("The " + name + " field cannot be empty");
        elem.className = 'fieldError';
        elem.focus();
        return false;
    } else {
        elem.className = 'style';
    }
}

And everyone on the playground had smores...

Hope that helps,
-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

http://www.tuxedo.org/~esr/faqs/smart-questions.html

 

[Tarwn]

Sorry, mispelled gray.
-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

http://www.tuxedo.org/~esr/faqs/smart-questions.html

 

[onpnt]

you mean grey Just a suggestion: faq183-874

http://www.onpntwebdesigns.com

admin@onpntwebdesigns.com

 

[xso]

Hi folks,

First of all, thanks for all your posts.

Onpnt, I call the function the way you did. I used both with and without return. But no cigar :-<

Tarwn, I tried the three ways, via id, via the getelementbyid and via the this keyword. The three work, meaning that the three checks correctly the conditions and the three succeed in changing the bgcolor of the correct field. But then, it still goes on to the next field (aargh).

Anyway, I'll try again tomorrow morning. I guess my ideas will be fresher :->

Cheers,

Kobzar

 

[Tarwn]

Oh sorry, forgot about the next field bit

ps: onpnt, try using the tgml color tag with the word grey and see what happens. You have to mispell it the TT way

To deal with the focus issue you could always just switch the event to onChange

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

http://www.tuxedo.org/~esr/faqs/smart-questions.html

 

[Tarwn]

Hmm, you haven't by any chance tried this with two blank inputs next to each other have you?
I have had to Ctrl+Alt+Del three browsers now, because the focus attempts to shift to the next input when you hit tab, but the last is empty so it goes back, which fires the second box which is empty, causing the focus to go back to 2nd, which fires first box.....hmmm --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

http://www.tuxedo.org/~esr/faqs/smart-questions.html

 

[onpnt]

hat was just what I was about to suggest was the problem. I hate it when I get beaten to the punch. I'm trying a solution now. try to post it for you in a bit


Tarwn, I know. bad joke. getting late in the day. know what I mean. Just a suggestion: faq183-874

http://www.onpntwebdesigns.com

admin@onpntwebdesigns.com

 

[xso]

Hi Tarwn,

Yeah, I did try it with 2 blank fields next to each other... ctrl+alt+del with Opera 6, ctrl+alt+del with IE6, but Mozilla was smart enough to avoid looping :->