[jQuery] Re: Color Label on Form Validation Error
Jörn, that works great. Thanks.
[jQuery] Re: Color Label on Form Validation Error
Thanks for the information guys, though I'm not sure I'll be able to use that specific solution given other requirements for the project. Jörn, is this something you'll look to add to a future release?
[jQuery] Re: Color Label on Form Validation Error
Scott Moore wrote: Thanks for the information guys, though I'm not sure I'll be able to use that specific solution given other requirements for the project. Jörn, is this something you'll look to add to a future release? If have it on my todo list, but am still looking for a good approach. Currently I think it would help the most to just add the errorClass to the parent element. As long as each label/input combo has its own parent element, which is always the case in the non-trivial forms I've seens, you can style it however you like. You could even style the parent element, too. What do you think about that? Do you need an explicit class on your label, or is the parent element good enough? Its much easier to implement and provides more flexibility. -- Jörn Zaefferer http://bassistance.de
[jQuery] Re: Color Label on Form Validation Error
Jörn Zaefferer wrote:
Scott Moore wrote:
Thanks for the information guys, though I'm not sure I'll be able to
use that specific solution given other requirements for the project.
Jörn, is this something you'll look to add to a future release?
If have it on my todo list, but am still looking for a good approach.
Currently I think it would help the most to just add the errorClass to
the parent element. As long as each label/input combo has its own
parent element, which is always the case in the non-trivial forms I've
seens, you can style it however you like. You could even style the
parent element, too.
What do you think about that? Do you need an explicit class on your
label, or is the parent element good enough? Its much easier to
implement and provides more flexibility.
I've added it to the RC1 release. Please give it a try: Just replace the
plugin and add a style rule that applies. Eg. if your label/fields
combos are enclosed in p-elements:
#myform p.error label { color: red; }
--
Jörn Zaefferer
http://bassistance.de
[jQuery] Re: Color Label on Form Validation Error
I set up a basic demo - http://nonsponsored.com/validation/ - but it's really not much different than your example form. So with showErrors, you're saying I'm able color the Name, Email and Password labels also? I'm not quite following how you can target those labels.
[jQuery] Re: Color Label on Form Validation Error
Scott Moore wrote:
I set up a basic demo - http://nonsponsored.com/validation/ - but it's
really not much different than your example form. So with showErrors,
you're saying I'm able color the Name, Email and Password labels also?
I'm not quite following how you can target those labels.
Ok, I've tried around a bit, and while its easy to add the class (see
below), its not possible to remove it again. I'll try to find a nice
solution that I can build into the plugin.
$(document).ready(function(){
$(#userForm).validate({
focusInvalid: false,
event: blur,
errorContainer: $(ul.error),
errorLabelContainer: $(ul.error),
wrapper: li,
rules: {
name: { required: true },
email: { required: true, email: true },
password: { required: true }
},
messages: {
name: Name is a required field.,
email: Your email address is required.,
password: Password is a required field.
},
showErrors: function(errors, validator) {
$.each(errors, function(key, value) {
$([EMAIL PROTECTED] + key +
]).not(.error).addClass(highlight);
});
validator.defaultShowErrors();
}
});
});
--
Jörn Zaefferer
http://bassistance.de
[jQuery] Re: Color Label on Form Validation Error
I set up a basic demo - http://nonsponsored.com/validation/ - but it's
really not much different than your example form. So with showErrors,
you're saying I'm able color the Name, Email and Password labels also?
I'm not quite following how you can target those labels.
Ok, I've tried around a bit, and while its easy to add the class (see
below), its not possible to remove it again. I'll try to find a nice
solution that I can build into the plugin.
$(document).ready(function(){
$(#userForm).validate({
focusInvalid: false,
event: blur,
errorContainer: $(ul.error),
errorLabelContainer: $(ul.error),
wrapper: li,
rules: {
name: { required: true },
email: { required: true, email: true },
password: { required: true }
},
messages: {
name: Name is a required field.,
email: Your email address is required.,
password: Password is a required field.
},
showErrors: function(errors, validator) {
$.each(errors, function(key, value) {
$([EMAIL PROTECTED] + key +
]).not(.error).addClass(highlight);
});
validator.defaultShowErrors();
}
});
});
What I've done in the past is just add an onfocus event to remove the
classes:
// for any input field in the signup form, add a onfocus event
$(#userForm input).focus(
// everything in this function is executed
function (){
// $(this) performs the operation on the current jQuery
object
// this removes the error class from the field
$(this).removeClass(error);
// the label name is equal to the field name attribute
// for checkbox and radio elements and equal to the id
// attribute for all other fields
var sLabelName = ($(this)[0].type == checkbox ||
$(this)[0].type == radio) ? $(this)[0].name : $(this)[0].id ;
// hide the error message for the current field
$([EMAIL PROTECTED] + $(this)[0].name +
[EMAIL PROTECTED]).hide();
}
);
You probably want to use a more specific selector to just grab text fields,
radio, checkbox and textarea elements, but you get the idea.
It would be nice if this hook was automatically added by the validator
though...
-Dan
[jQuery] Re: Color Label on Form Validation Error
Dan G. Switzer, II wrote:
What I've done in the past is just add an onfocus event to remove the
classes:
// for any input field in the signup form, add a onfocus event
$(#userForm input).focus(
// everything in this function is executed
function (){
// $(this) performs the operation on the current jQuery
object
// this removes the error class from the field
$(this).removeClass(error);
// the label name is equal to the field name attribute
// for checkbox and radio elements and equal to the id
// attribute for all other fields
var sLabelName = ($(this)[0].type == checkbox ||
$(this)[0].type == radio) ? $(this)[0].name : $(this)[0].id ;
// hide the error message for the current field
$([EMAIL PROTECTED] + $(this)[0].name +
[EMAIL PROTECTED]).hide();
}
);
You probably want to use a more specific selector to just grab text fields,
radio, checkbox and textarea elements, but you get the idea.
It would be nice if this hook was automatically added by the validator
though...
This basically removes all hints of an invalid field on focus, right?
Allowing the use to start again, fixing the previous problems.
The plugin adds a focus-event-handler to all elements in the form
anyway, so the overhead of adding the cleanup would is minimal:
refresh: function() {
var validator = this;
this.elements = jQuery(this.currentForm).find(...).focus(function() {
validator.lastActive = this;
// hide error label and remove error class on focus if enabled
if ( validator.settings.focusCleanup ) {
$(this).removeClass(validator.settings.errorClass);
validator.errors().forId( validator.idOrName(this)
).hide();
}
});
},
Using the stuff already available in the plugin to get id/name and
select the appropiate error elements makes the code quite short and
effective.
Not so great when combined with focusInvalid.
--
Jörn Zaefferer
http://bassistance.de
[jQuery] Re: Color Label on Form Validation Error
$('#publish_form').validate({
event: 'blur',
rules: {
number_field: {
required: true,
number: true
} // You know what to put here
},
errorPlacement: function (error, element) {
error.insertBefore(element.parents('div.pair_row').find('div.info'));
}
});
Using the errorPlacement event/callback you can place the label
whereever you want. It's automatically generated with class=error so
you can apply styling to it.
Regards,
Emil Ivanov
On May 20, 10:59 pm, Scott Moore [EMAIL PROTECTED] wrote:
Not sure if I'm just missing this or what, but I'm using Jörn's
wonderful form validation plug-in and can't seem to find how to add an
error class to the label next to the input field that didn't
validate.
Please don't mistake this as a question about the error messaging, as
that's working just fine. But I also want to add that same error class
to the label of the failed input.
Any thoughts?
[jQuery] Re: Color Label on Form Validation Error
Scott Moore wrote: Not sure if I'm just missing this or what, but I'm using Jörn's wonderful form validation plug-in and can't seem to find how to add an error class to the label next to the input field that didn't validate. Please don't mistake this as a question about the error messaging, as that's working just fine. But I also want to add that same error class to the label of the failed input. With those hook available, you could use the showErrors-option to color the labels and defer the rest by calling defaultShowErrors. Take a look at this demo for reference: http://jquery.bassistance.de/validate/demo-test/custom-methods-demo.html It uses the showErrors-option to display errors both in an alert (yuk) and via the error labels (by calling validator.defaultShowErrors() at the end). Please give this a try and let me know if it works for you. Anyhow it would be very useful if you could post some test/example code, that would help a lot to provide a cleaner solution. -- Jörn Zaefferer http://bassistance.de
[jQuery] Re: Color Label on Form Validation Error
and if he find for error class and subistitute the label class for some label_error_class ??? On 5/20/07, Jörn Zaefferer [EMAIL PROTECTED] wrote: Emil Ivanov wrote: Using the errorPlacement event/callback you can place the label whereever you want. It's automatically generated with class=error so you can apply styling to it. That isn't what he asked for: Please don't mistake this as a question about the error messaging, as that's working just fine. But I also want to add that same error class to the label of the failed input. -- Jörn Zaefferer http://bassistance.de -- []´s Jean www.suissa.info Ethereal Agency www.etherealagency.com
