JS Form Validation Alert Messages

Forum Moderators: open

Message Too Old, No Replies

JS Form Validation Alert Messages

Pop up Box Alert alternative... Alert within the page...

tek420angel

5:01 pm on Jan 24, 2005 (gmt 0)

Is there any way to get form validation alerts (I.E. "The first name field must not be left blank.") to appear on the page rather than displaying on the page? And if so, can the font/color properties be edited? An example of this might be done would be very much appreciated.

An example of how this is done can be found on Amazon.com. If there is a problem with a form, the page refreshes and a box is displayed above the form marked Important Message and then all the problems with the form are displayed beneath the actual form field. How the heck is this accomplished? I tried viewing source and wasn't able to really decipher what was going on... HELP PLEASE!

Bernard Marx

10:35 pm on Jan 24, 2005 (gmt 0)

This isn't very complicated. Just put the basic markup for the box on the page, but set the box's CSS display value to 'none'.

When / if there are any problems, the box is displayed. Including details about what's actually wrong is easy too, but depends upon the specific validation requirements of the form.

Is it a short form?
Can you post it?

adni18

1:25 pm on Jan 25, 2005 (gmt 0)

<BODY>

msg=msg.replace(/\</g, "<");
msgTitle=msgTitle.replace(/\</g, "<");
msg=msg.replace(/\>/g, ">");
msgTitle=msgTitle.replace(/\>/g, ">");

document.getElementById("mgMain").style.display="inline";
document.getElementById("mgTitle").innerHTML="\n"+msgTitle+"\n";
document.getElementById("mgIn").innerHTML="\n"+msg+"\n";
document.getElementById("mgMain").style.left=document.body.clientWidth/2-document.getElementById("mgMain").clientWidth/1.5+"px";
document.getElementById("mgMain").style.top=document.body.clientHeight/2-document.getElementById("mgMain").clientHeight/1.5+"px";

}

window.setTimeout("nAlert('>> Invalid Input <<','That input does not match our sensors.')",3000)

</script>

tek420angel

2:40 pm on Jan 25, 2005 (gmt 0)

The form isn't really short.. I've got customer info, then payment info and three radio buttons for different payment methods, then an additional two radio buttons for a one of the first three radio button sets, and following that of course is the comments section. And I tried that js thing posted by adni18 and I'm not sure that's what I'm looking for exactly.

Bernard Marx

7:18 pm on Jan 25, 2005 (gmt 0)

It's not possible to write a generic script for this, because the details depend very much on the validation requirements of the individual form.

(As you've been informed elsewhere..) it's a matter of running through the form's input elements, checking them against validation rules (RegExps etc), whilst building up a string that carries the details of any invalid input for the error message.

I've got customer info, then payment info and three radio buttons for different payment methods, then an additional two radio buttons for a one of the first three radio button sets, and following that of course is the comments section

That's not necessarily a lot of code.