Take a look at the this form <http://www.mediatemple.net/company/contact_us/> and fill out one field (not all) then hit the send button. Notice the interesting error alert. The shaking aspect is OK but I really like how the empty fields are returned highlighted in red. Would this be difficult to do manually or does anyone know of a script that does this?
Todd
In Prototype, you could do the following:
Event.observe('yourform','submit',function(evt){
Event.stop(evt);
var myForm = Event.element(evt);
var errors = 0;
myForm.getElements().each(function(elm){
var val = elm.getValue();
if(val == '' || val == 'Some Default'){
elm.addClassName('error');
errors ++;
}
});
return (errors < 1) ? $('yourform').submit() : false;
}
style:
.error {
border: red;
}
I would also back this up on the server, such that a script-less
browser would see the same thing. Troll through the form collection,
note any missing variables, and set the classname of the form input
to your error style.
Walter
On Jan 10, 2008, at 12:59 PM, Todd wrote:
Take a look at the this form <http://www.mediatemple.net/company/
contact_us/> and fill out one field (not all) then hit the send
button. Notice the interesting error alert. The shaking aspect is
OK but I really like how the empty fields are returned highlighted
in red. Would this be difficult to do manually or does anyone know
of a script that does this?Todd
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Walter. So with a little bit of editing I can just toss this
in a separate file and link to it or does it need to be in the form
page Head tag to work? And it can be plugged into (so to speak) a
preexisting form?
Todd
On Jan 10, 2008, at 12:30 PM, Walter Lee Davis wrote:
In Prototype, you could do the following:
Event.observe(‘yourform’,‘submit’,function(evt){
Event.stop(evt);
var myForm = Event.element(evt);
var errors = 0;
myForm.getElements().each(function(elm){
var val = elm.getValue();
if(val == ‘’ || val == ‘Some Default’){
elm.addClassName(‘error’);
errors ++;
}
});
return (errors < 1) ? $(‘yourform’).submit() : false;
}style:
.error {
border: red;
}I would also back this up on the server, such that a script-less
browser would see the same thing. Troll through the form collection,
note any missing variables, and set the classname of the form input
to your error style.
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I would put it in another file, and use the External JavaScript
action to attach it to your page. Be sure that the prototype.js file
is included FIRST, before trying to add in this code, or it will just
error out.
To make sure that the document has completely loaded before
attempting to register the event listener, be sure to wrap the code I
posted within a document listener:
Event.observe(window,'load',function(){
Event.observe('yourform'... etc.
}
Another way to do this is to simply apply the Protaculous action to
the page, enable Prototype, and then paste this code into the
Function Body field in the Actions palette. This simplifies things
considerably, since it also includes the prototype.js file for you,
and makes sure that it gets included before everything else (it
becomes the very first thing in the HEAD).
Walter
On Jan 10, 2008, at 2:28 PM, Todd wrote:
Thanks Walter. So with a little bit of editing I can just toss this
in a separate file and link to it or does it need to be in the form
page Head tag to work? And it can be plugged into (so to speak) a
preexisting form?Todd
On Jan 10, 2008, at 12:30 PM, Walter Lee Davis wrote:
In Prototype, you could do the following:
Event.observe(‘yourform’,‘submit’,function(evt){
Event.stop(evt);
var myForm = Event.element(evt);
var errors = 0;
myForm.getElements().each(function(elm){
var val = elm.getValue();
if(val == ‘’ || val == ‘Some Default’){
elm.addClassName(‘error’);
errors ++;
}
});
return (errors < 1) ? $(‘yourform’).submit() : false;
}style:
.error {
border: red;
}I would also back this up on the server, such that a script-less
browser would see the same thing. Troll through the form collection,
note any missing variables, and set the classname of the form input
to your error style.
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Errr. Typo.
Event.observe(window,'load',function(){
Event.observe('yourform'... etc.
});
That closing parenthesis (or lack thereof) will get you every time.
Walter
On Jan 10, 2008, at 2:37 PM, Walter Lee Davis wrote:
I would put it in another file, and use the External JavaScript
action to attach it to your page. Be sure that the prototype.js file
is included FIRST, before trying to add in this code, or it will just
error out.To make sure that the document has completely loaded before
attempting to register the event listener, be sure to wrap the code I
posted within a document listener:Event.observe(window,‘load’,function(){
Event.observe(‘yourform’… etc.
}Another way to do this is to simply apply the Protaculous action to
the page, enable Prototype, and then paste this code into the
Function Body field in the Actions palette. This simplifies things
considerably, since it also includes the prototype.js file for you,
and makes sure that it gets included before everything else (it
becomes the very first thing in the HEAD).Walter
On Jan 10, 2008, at 2:28 PM, Todd wrote:
Thanks Walter. So with a little bit of editing I can just toss this
in a separate file and link to it or does it need to be in the form
page Head tag to work? And it can be plugged into (so to speak) a
preexisting form?Todd
On Jan 10, 2008, at 12:30 PM, Walter Lee Davis wrote:
In Prototype, you could do the following:
Event.observe(‘yourform’,‘submit’,function(evt){
Event.stop(evt);
var myForm = Event.element(evt);
var errors = 0;
myForm.getElements().each(function(elm){
var val = elm.getValue();
if(val == ‘’ || val == ‘Some Default’){
elm.addClassName(‘error’);
errors ++;
}
});
return (errors < 1) ? $(‘yourform’).submit() : false;
}style:
.error {
border: red;
}I would also back this up on the server, such that a script-less
browser would see the same thing. Troll through the form collection,
note any missing variables, and set the classname of the form input
to your error style.
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Cool. On the Temple form, the large colored alert box that lists the errors; is that something that’s created by the form handler or is it also possible to use prototype for this? I know Mike B. uses this on his easiForm action.
Todd
On Jan 10, 2008, at 1:42 PM, Walter Lee Davis wrote:
Errr. Typo.
Event.observe(window,‘load’,function(){
Event.observe(‘yourform’… etc.
});
That closing parenthesis (or lack thereof) will get you every time.
As I have lectured endlessly, any validation you do on the client
needs to be backed up on the server. You cannot rely on JavaScript
for anything, because it is in the user’s control. And you can’t
trust the user any further than you can spit a live rat.
Slightly longer answer, yes, you can create DIVs in Prototype:
new Insertion.After('someElement','<div class="alert">You made a boo-
boo!’);
And you can do all sorts of cool stuff with third-party libs, like
Control.Modal or Prototype.Window, that allow you do do all sorts of
lightbox-y things with random div content.
But you really really have to test this stuff on the server
before you let it anywhere near your database or mailserver, so it’s
best to attack it there first, and then later add a javascript
version as a convenience to the user (since it’s faster to do this on
the client, without a round-trip to the server).
Walter
On Jan 10, 2008, at 2:51 PM, Todd wrote:
Cool. On the Temple form, the large colored alert box that lists
the errors; is that something that’s created by the form handler or
is it also possible to use prototype for this? I know Mike B. uses
this on his easiForm action.Todd
On Jan 10, 2008, at 1:42 PM, Walter Lee Davis wrote:
Errr. Typo.
Event.observe(window,‘load’,function(){
Event.observe(‘yourform’… etc.
});That closing parenthesis (or lack thereof) will get you every time.
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options