- theprintedblogAsked on February 27, 2011 at 12:49 PM
Is it possible to move the error message to the right of the field, instead of having it appear under the field? If so, how? Also, I'd like to make the message format much simplier - no arrow, no box, no background - just a tasteful message. Finally, is it possible to customize the error message to the field? For example, if they forget to enter their Name, the error message says, "Please enter your name". Thanks, Josh
- DanielGriffinAnswered on February 28, 2011 at 08:36 AM
It is possible to modify the error message somewhat by injecting your own CSS. The affected classes will depend on the type of input that the error is for. So for example a basic form with an input box would have the following error classes
form-text validate[required] form-validation-error
If you need others, I recommend installing firebug and then going to your form to cause errors. Check the source with firebug and you will see all of the currently active classes. Then just start injecting your own CSS in the form builder to override these.
Getting the label to change is a bit trickier. You would need to have the full source code in your page, then look for the following element
Then modify it to suit your requirements.
- theprintedblogAnswered on February 28, 2011 at 08:48 AM
Daniel... thanks for the reply. I'm not entirely certain it's possible to move the error message to the right of the field, even using form-error-message, but I haven't given up entirely yet. I've been able to modify the error format (via classes) and even create my own, custom error message for a specific field by doing some light modification to the .js. If I can figure out more control over the placement of the error, I'll let you know (if you have any other specific hints, I'd love them). Thanks, Josh
- DanielGriffinAnswered on February 28, 2011 at 09:03 AM
Yes please do share anything you find, that would be great!!
If you really want full control over the position, you could try using absolute positioning, (position:absolute;
Here is a great turorial on positioning that I always fall back to when I get stuck, there might be something in here which will help:
- theprintedblogAnswered on February 28, 2011 at 09:13 AM
I will - I've seen that positioning tutorial - it's great - thanks. One last, fairly technical question - is it possible for me to move the fields out of the list structure and to use my own <div> structure instead? I see the .js referencing the lists, so I can't imagine it's possible - do you know the answer to that? Thanks, Josh
- DanielGriffinAnswered on February 28, 2011 at 09:22 AM
sorry I can't be more specific, that would really be a question for the devs, but a major change like this would be very low priority for them. If you do try it please feel free to post anything interesting here!