John Beppu - Form.Validator-0.33
NAME
Form.Validator.Report.InnerHTML - messages inside an element's innerHTML
SYNOPSIS
InnerHTML requires extra elements for the error messages:
<form name="f" action="/process" method="post"
onsubmit="return fv.validate()">
<table>
<tr>
<td class="label">
Name:
</td>
<td class="field">
<input type="text" name="name" onkeyup="fv.validate('name')" />
</td>
<td class="status" id="name_errors"> </td>
</tr>
<tr>
<td class="label">
Email:
</td>
<td class="field">
<input type="text" name="email" onkeyup="fv.validate('email')" />
</td>
<td class="status" id="email_errors"> </td>
</tr>
</table>
</form>
Now for the javascript:
<script type="text/javascript" src='/js/Form/Validator.js'></script>
<script type="text/javascript" src='/js/Form/Validator/Report/InnerHTML.js'></script>
<script>
fv = new Form.Validator('document.f');
fv.set('name', 'notBlank', {
onFailure: 'Name is required.',
onSuccess: '<b>OK</b>'
});
fv.set('email', 'notBlank', {
onFailure: 'Email is required.',
onSuccess: '<b>OK</b>'
});
var report = fv.reporter('InnerHTML');
report.suffix = "_errors";
</script>
DESCRIPTION
This method of reporting validation errors was inspired by the way http://www.rememberthemilk.com/ does validation on their registration form. Realtime validation is really nice.
However, Unlike the reporting methods that use alert pop-ups, this technique requires a bit more support from the form.
- HTML elements for displaying messages must be provided.
- Input elements need extra event handlers for realtime response.
It doesn't matter whether it's a div, span, td or whatever. As long as it has an innerHTML property that can be modified, we can use it. It should also have an id that consists of: `this.prefix + field + this.suffix`.
The example in the "SYNOPSIS" uses onkeyup. I have a suspicion that onchange and onblur may also benefit from getting handlers hooked up.
PROPERTIES
fv
This is the Form.Validator object.
messages
This is a dictionary of messages keyed by field name.
prefix
suffix
When Form.Validator.Report.InnerHTML looks for an element to put a message into, it'll look for the id:
this.prefix + field + this.suffix
The default prefix is "", and the default suffix is currently "_errors", because that's what seems to make sense for HTML::Widget.
separator
It's possible for a field to fail multiple constraints, so a separator string for the list of messages was needed. The default is: ", ".
onSuccess
This is the default message that'll be used when a constraint passes. It'll be used when an onSuccess message specific to a constraint doesn't exist. The default is "OK", but you should probably override this one.
METHODS
start
This clears this.messages.
run
This populates this.messages.
finish
This takes the contents of this.messages and stuffs it inside the innerHTML of the elements that have been set aside to hold these validation messages.
AUTHOR
John Beppu <beppu@cpan.org>
Lee Carmichael
if (Form == undefined) var Form = { };
if (Form.Validator == undefined) Form.Validator = { };
if (Form.Validator.Report == undefined) Form.Validator.Report = { };
Form.Validator.Report.InnerHTML = function(fv) {
this.fv = fv;
this.messages = { };
};
Form.Validator.Report.InnerHTML.prototype = {
fv : null,
messages : null,
prefix : "",
suffix : "_errors",
separator : ", ",
onSuccess : "OK",
devmode : false, // when in alert on fatal errors
start: function(constraints) {
var i;
for (i = 0; i < constraints.length; i++) {
var c = constraints[i];
var id = this.prefix + c.field + this.suffix;
this.messages[id] = {
list : [ ],
onSuccess : c.onSuccess || this.onSuccess
};
}
},
run: function(ok, c) {
if (!ok) {
var id = this.prefix + c.field + this.suffix;
this.messages[id].list.push(c.onFailure);
}
},
finish: function() {
var key;
for (id in this.messages) {
var list = this.messages[id].list;
try {
var element = document.getElementById(id);
if (list.length > 0) {
element.innerHTML = list.join(this.separator);
} else {
element.innerHTML =
this.messages[id].onSuccess ||
this.onSuccess;
}
}
catch (e) {
// alert in correct mode, what to do in normal operation?
if (this.devmode)
alert("Problem with " + id + " - might be missing element : " + e);
}
}
this.messages = { };
}
};
/*
=head1 NAME
Form.Validator.Report.InnerHTML - messages inside an element's innerHTML
=head1 SYNOPSIS
InnerHTML requires extra elements for the error messages:
<form name="f" action="/process" method="post"
onsubmit="return fv.validate()">
<table>
<tr>
<td class="label">
Name:
</td>
<td class="field">
<input type="text" name="name" onkeyup="fv.validate('name')" />
</td>
<td class="status" id="name_errors"> </td>
</tr>
<tr>
<td class="label">
Email:
</td>
<td class="field">
<input type="text" name="email" onkeyup="fv.validate('email')" />
</td>
<td class="status" id="email_errors"> </td>
</tr>
</table>
</form>
Now for the javascript:
<script type="text/javascript" src='/js/Form/Validator.js'></script>
<script type="text/javascript" src='/js/Form/Validator/Report/InnerHTML.js'></script>
<script>
fv = new Form.Validator('document.f');
fv.set('name', 'notBlank', {
onFailure: 'Name is required.',
onSuccess: '<b>OK</b>'
});
fv.set('email', 'notBlank', {
onFailure: 'Email is required.',
onSuccess: '<b>OK</b>'
});
var report = fv.reporter('InnerHTML');
report.suffix = "_errors";
</script>
=head1 DESCRIPTION
This method of reporting validation errors was inspired by the way
http://www.rememberthemilk.com/ does validation on their registration
form. Realtime validation is really nice.
However, Unlike the reporting methods that use alert pop-ups, this
technique requires a bit more support from the form.
=over 2
=item * HTML elements for displaying messages must be provided.
It doesn't matter whether it's a div, span, td or whatever.
As long as it has an innerHTML property that can be modified,
we can use it. It should also have an id that consists of:
`this.prefix + field + this.suffix`.
=item * Input elements need extra event handlers for realtime response.
The example in the L</SYNOPSIS> uses C<onkeyup>. I have a suspicion
that C<onchange> and C<onblur> may also benefit from getting handlers
hooked up.
=back
=head1 PROPERTIES
=head2 fv
This is the L<Form.Validator> object.
=head2 messages
This is a dictionary of messages keyed by field name.
=head2 prefix
=head2 suffix
When Form.Validator.Report.InnerHTML looks for an element to put
a message into, it'll look for the id:
this.prefix + field + this.suffix
The default prefix is "", and the default suffix is currently "_errors",
because that's what seems to make sense for L<HTML::Widget>.
=head2 separator
It's possible for a field to fail multiple constraints, so a
separator string for the list of messages was needed. The default
is: ", ".
=head2 onSuccess
This is the default message that'll be used when a constraint passes.
It'll be used when an onSuccess message specific to a constraint
doesn't exist. The default is "OK", but you should probably override
this one.
=head1 METHODS
=head2 start
This clears this.messages.
=head2 run
This populates this.messages.
=head2 finish
This takes the contents of this.messages and stuffs it inside the
innerHTML of the elements that have been set aside to hold these
validation messages.
=head1 AUTHOR
John Beppu E<lt>beppu@cpan.orgE<gt>
Lee Carmichael
=cut
*/