Question

I am new to both SO and web development in general. Sorry for my general ignorance.

I have built a form which has validation ahead of form submission.
I have included jqueryTOOLS basic validator: http://www.jquerytools.org/demos/validator/index.html

It works fine, but I need to adjust the position of the error message, which I have discovered I can do with the following code:

$("#myform").validator({
position: 'center left',
offset: [-2, 80],
});

However, it is adjusting the position of the LEFT hand side of the div containing the error message. Because I would like the error to appear on the LEFT of each field, I am trying to anchor the RIGHT hand side of the error message, not the left.

So while I can move the error messages around using the position and offset, I want the point of the error message I am moving around to change.

This is important because the error messages are of different lengths, and so if I anchor the left side, then longer messages will cover the fields that require interaction.

I hope this was clear, I can explain more if not! 🙂

Answer 1

The problem is due to the jquery tools plugin setting the left css attribute vs. the right attribute. It’s absolutely positioned on the page so the calculation it does for ‘center left’ is incorrect.. it should be calculating distance from right side of page, not left. You can even see this failure on their demo page: just open up a console and run this:

$("#myform").validator({position:'center left', offset:[0,0]})

Click submit and you will see it doesn’t work

You could force a certain width for the error width (e.g. 200) and then you could pass in offset:[0,200] and it will appear correctly.

Otherwise you’ll probably have to manually fix the logic in the plugin source (and submit a bug to them!)