I saw this validation plugin http://demos.usejquery.com/ketchup-plugin/ and i wondered, how can you determinate the position of the input? With that plugin as you could notice, display a message but how does it knows exactly where the input with a error is and put the message exactly there?
Add a comment
|
2 Answers
The source code for this plugin, specifically the one for the error message container looks like this:
createErrorContainer: function(form, el) {
if(typeof form == 'function') {
this.defaults.createErrorContainer = form;
return this;
} else {
var elOffset = el.offset();
return $('<div/>', {
html : '<ul></ul><span></span>',
'class': 'ketchup-error',
css : {
top : elOffset.top,
left: elOffset.left + el.outerWidth() - 20
}
}).appendTo('body');
}
},
So as you can see, it's using the .offset() method to fetch the position of the input fields in relation to the document.
More info here: http://api.jquery.com/offset/
Comments
After you get the element (possibly by id), in raw JavaScript:
element.offsetLeft
element.offsetTop
Or with jQuery's cross-browser .offset() function.
For validation Html5 does this already. You don't really need to do validation with Javascript. There are also pollyfills available that fill in support for html5 form validation when a browser doesn't support it.
