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