JQ validation plugin - error labels ( errorPlacement ) outside the form, is it possible?
I'm using JQuery Validation Plugin.
I wander if it's possible to place the error outside the FORM element which is being validated. I would like to place all the error labels at the bottom of the DOM and change them to absolute position. I tried something like this:
errorPlacement: function(error, element) {
var position = element.offset();
error.appendTo('body'); // put the error label before end of <body>
error.css('position', 'absolute');
error.css('left', position.left + element.innerWidth());
error.css('top', position.top);
error.addClass('error-message'); // add a class to the wrapper
What this did - the error labels appear OK if you enter some invalid data into the input, BUT after you enter valid data, the labels don't get removed. (i guess since the error label is not a child of the form element, the validation plugin simply doesn't find it)
Why i need it?
It's because I have a ton of different client sites that have different HTML layout and design. Sometimes the form is in a DIV with a small width and the error label doesn't fit into the div. The only solution i see is to place the error labels at the end of the DOM and then with absolute position place them at the right position, in front of the invalid fi开发者_C百科elds.An suggestions how to make the plugin work outside of the FORM?
Use the errorLabelContainer and/or errorContainer option(s) to specify the target DOM node for you error messages. Like:
$("#myform").validate({
errorLabelContainer: "div#errors",
})
See the documentation at http://docs.jquery.com/Plugins/Validation/validate#toptions , you'll find some working examples both for using errorContainer and errorLabelContainer.
加载中,请稍侯......
精彩评论