CSS form layout with jQuery Validation errors

Question

I have a form that I've styled with CSS to line up text boxes properly. I'm using jQuery Validation with the form. I'm running into a layout issue when I submit the form because of the errors that are being produced from the validation. My CSS is as follows:

#form p label {
    padding-top: 5px;
    display: block;
    width: 100px;
    float: left;
}

I know the float: left; is causing the issue. I'm looking for the errors to appear next to each textbox without the layout changing. The class for jQuery Validation errors is .errors. I've made a jsFiddle to recreate my issue.

score 0 · Answer 1 · answered Mar 21 '13 at 00:21

Using absolute positioning on your error element will allow your form to remain unchanged on an error. This will however require additional markup to maintain your form display. In this example, a wrapper of <span class="item"></span> was added to your input field to provide position boundaries for the error element.

Note that the properties set for the label element will affect your error label as well.

See http://jsfiddle.net/K5fR8/3/ for an example.

Full markup as follows:

HTML

<form id="form" action="" method="post">
<p>
    <label for="email">Email:</label>
    <span class="item">
        <input type="text" name="email" id="email" placeholder="Email" value="" class="required" />
    </span>
</p>
<p>
    <label for="password">Password:</label>
    <span class="item">
        <input type="password" name="password" id="password" placeholder="Password" value="" class="required" />
    </span>
</p>
<p>
    <label for=""></label>
    <input type="submit" name="submit" id="submit" value="Log In" class="button" />
</p>

CSS

#form p label {
    padding-top: 5px;
    display: block;
    width: 100px;
    float: left;
}

#form p .item {
    position: relative;
}

#form p .item label.error {
    float: none;
    position: absolute;
    top: 0;
    right: -100px; /* Offset by width set on label element */
    padding: 0px;
}

@if237912print, please stop spamming comments with a question. Post a question if you have a question. Otherwise, message placement for this plugin has already been answered here numerous times. — Sparky, Aug 31 '17 at 02:38

score 0 · Accepted Answer · edited May 23 '17 at 12:28

0

Your CSS for the label elements is targeting all label elements on the page, so it's over-riding the label elements used by the plugin to display form errors.

Simply adding this CSS will set only the label elements used by the plugin back to default values without affecting any of your other label elements.

#form p label.error {
    float: none;
    display: inline;
}

DEMO: http://jsfiddle.net/4Wspp/

EDIT:

My answer solves your question, but if you want to take more advantage of jQuery, you should check out another option using a jQuery plugin for fancy tool-tips.

DEMO: http://jsfiddle.net/kyK4G/

From this SO answer: https://stackoverflow.com/a/14741689/594235

edited May 23 '17 at 12:28

Community

1
1

answered Mar 21 '13 at 01:28

Sparky

98,165
25
199
285

Thanks! I didn't know the plugin was using a label. This worked great. – SeanWM Mar 21 '13 at 01:32
1

@SeanWM, not a problem. Also check out the edit on my answer for an alternative approach. – Sparky Mar 21 '13 at 01:34
@if237912print, you are not supposed to ask new questions within comments. Otherwise, this plugin's message placement has been solved many times here already; you simply need to search using the [tag:jquery-validate] tag and `errorPlacement`. – Sparky Aug 31 '17 at 02:34

CSS form layout with jQuery Validation errors

2 Answers2