How can I move the validation message to the right of the field (and change it's style)...

  • Profile Image
    theprintedblog
    Asked 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

  • Profile Image
    DanielGriffin
    Answered on February 28, 2011 at 08:36 AM

    Hi there,

    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
    form-error-message
    form-error-arrow
    form-line form-line-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

    <div class="form-error-message">

    Then modify it to suit your requirements.

    Thanks,

    Daniel

  • Profile Image
    theprintedblog
    Answered 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

  • Profile Image
    DanielGriffin
    Answered on February 28, 2011 at 09:03 AM

    Hi Josh,

    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:

    http://www.barelyfitz.com/screencast/html-training/css/positioning/

    Thanks,

    Daniel

  • Profile Image
    theprintedblog
    Answered on February 28, 2011 at 09:13 AM

    Daniel,

    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

  • Profile Image
    DanielGriffin
    Answered on February 28, 2011 at 09:22 AM

    Hi again,

    To be honest I'm not sure.  It sounds possible but there might be other javascript code which needs to parse that structure.  If there is then I suspect that something would fail somewhere else... if you try it, back all of your current code up first  :)

    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!

    Thanks