Hello,
I am working with Jorn's most excellent form validation plugin (
http://bassistance.de/jquery-plugins/jquery-plugin-validation/), making an
attempt to modify it for use with the Uni-Form markup (
http://dnevnikeklektika.com/uni-form/). I have made several changes and am
mostly there, but I am hung on two major things:
1) I need to insert my error message <p> just inside the "holder" div
instead of just before the input field.
The desired markup:
<div class="ctrlHolder error">
<p id="error1" class="errorField bold">My error message</p>
<label for="myfield">My Form Field</label>
<input name="myfield" id="myfield" class="textInput" />
</div>
I have slightly altered lines 597-602 in the v1.3 jquery.validate.js file,
running insertBefore() instead of insertAfter().
if ( !this.labelContainer.append(label).length )
this.settings.errorPlacement
? this.settings.errorPlacement(label, jQuery(element) )
: label.insertBefore(element); // inserts before the <input />
This gets me partially where I want to be, but the new <p> is placed
immediately before the <input />...
<div class="ctrlHolder error">
<label for="myfield">My Form Field</label>
<p id="error1" class="errorField bold">My error message</p>
<input name="myfield" id="myfield" class="textInput" />
</div>
I have tried quite a variety of things in an effort to achieve the desired
results, but so far everything I have tried results in one error or
another. Here is an example of what I have tried:
:
label.insertBefore(element.parents("div.ctrlHolder").children("label")); //
attempt to insert before the <label>
2) For some reason that I have yet to figure out, the changes I have made
cause error messages (the validation error message) to be generated each
time the offending field is placed into focus and then clicked out of.
Hopefully this explanation will clarify what I mean.
a - submit the form, leaving a required field empty
b - an error message is added to the DOM, and the first offending field is
placed into focus
c - click out of the field, and the error message is added again to the DOM,
resulting in two error messages being displayed
d - place the cursor back inside the field
e - click out of the field, and yet another error message is added to the
DOM
Repeat steps 'd' and 'e' as often as you'd like, and you'll keep getting
error messages added to the DOM.
Obviously the changes that I have made are causing this, I'm just not seeing
it. I'm hoping that a set of fresh eyes will be able to spot the issue.
:-)
Here is the complete showLabel: function() and the errorsFor: function() as
edited by me...
showLabel: function(element, message) {
var label = this.errorsFor( element );
if ( label.length ) {
// refresh error/success class
label.removeClass().addClass( this.settings.errorClass );
// check if we have a generated label, replace the message then
label.attr("generated") && label.html(message);
} else {
// create label
label = jQuery("<p/>") // edited MQ - p instead of
this.settings.errorElement
.attr({id: "error-" + this.idOrName(element), generated: true})
// edited MQ - id: "error-" instead of "for":
.addClass("errorField bold") // edited MQ - errorField bold
instead of this.settings.errorClass
.html(message || "");
if ( this.settings.wrapper ) {
// make sure the element is visible, even in IE
// actually showing the wrapped element is handled elsewhere
label = label.hide().show().wrap("<" + this.settings.wrapper +
">").parent();
}
if ( !this.labelContainer.append(label).length )
this.settings.errorPlacement
? this.settings.errorPlacement(label, jQuery(element) )
: label.insertBefore(element); // edited MQ - insertBefore()
instead of insertAfter()
label.parents("div.ctrlHolder").addClass("error"); // added MQ - add
"error" class to the holding div
}
if ( !message && this.settings.success ) {
label.text("");
typeof this.settings.success == "string"
? label.addClass( this.settings.success )
: this.settings.success( label );
}
this.toShow.push(label);
},
errorsFor: function(element) {
return this.errors().filter('p[id="error-' + this.idOrName(element) +
'"]'); // edited MQ - p[id=error- instead of [EMAIL PROTECTED]
},
You can see this in action at http://www.quackfuzed.com/stuff/jquery/
Thanks in advance for your guidance. :-)
Matt
