Re: Anomaly: onblur handling AND advice on validation

On Jan 30, 4:42 am, Emmes <emmes2... (AT) gmail (DOT) com> wrote:
[...]

We know it isn't the best/right way to do things, but our customers
specifically demand that our web application has large HTML forms
( sometimes 200 fields ) and that validation for each field takes
place as the user fills out each field.

I think that is the "best/right way to do things", provided validation
waits until I actually leave the field and doesn't stop me from going
to the next (or any other) field. It should just put a message in the
page to let me know the field I left isn't valid.

Additionally are users want
processing to happen the same whether or not the user likes to mouse
our keyboard through the forms via tabbing.

That is easy enough.

These customer mandated constraints and being cross browser compliant
are our only concerns. Whatever fills both sets of demands we are
happy to run with it. I would welcome any advice in this regard.

Our web application is currently doing javascript validation by
attaching javascript functions to the onblur event of each HTML field
on our large forms.

Our problem in going cross browser is that Internet Explorer and
Firefox handle onblur events in combination with form submission
differently.

The problem stems from using onblur with an alert dialog - never a
good idea.

A simple solution is to write errors to the page, not to an alert
dialogue, then you can run the same validation onbur and onsubmit - it
doesn't matter if it runs twice occasionally. Then you can do your
validation onchange or onblur (but be careful of radio buttons...).
Remember to validate all your fields onsubmit and cancel submit if one
fails.

The following is play code based on your post to demonstrate the
concept, once you decide to put error messages unobtrusively in the
page, you can run validation whenever you like without interrupting
the user.

<title>Demonstrate different onblur event handling, FF vs IE </
title>

<style type="text/css">
.errMsg { font-weight: bold; color: red;}
</style>

<script>

function procApple(el) {
// alert("processing procApple(): ");
var typeApple = el.value;

if(typeApple != 'gala') {
wErr(el, 'I only eat Gala Apples, please type "gala"');
return false;
}
return true;
}

function wErr(el, msg) {
var errEl = document.getElementById(el.id + '_errMsg');
errEl.innerHTML = msg;
}

</script>

<form name = "form1" action = "http://www.google.com"
onsubmit="return procApple(this.apple);">

<label for="apple">Name a type of Apple:<span
id="apple_errMsg" class="errMsg"></span>
<br>
<input type="text" id="apple" name="apple"
onblur="procApple(this)"></label>

<input type="submit">
</form>


--
Rob