bootstrap input group btn pushed down after jquery validation kicks in

Question

I have a bootstrap styled form:

<div class="form-group">
            <label for="formEmail">User Email</label>
            <div class="input-group">
                <select class="form-control" data-rule-emailRequired="true" name="email" id="formEmail">
                    <option value="default">Please Select Users</option>
                </select>
                <span class="input-group-btn">
                    <button class="btn btn-default" id="addUserBtn" type="button">Create User</button>
                </span>
                <span class="input-group-btn">
                    <button class="btn btn-default" id="newUserBtn" type="button">Add User</button>
                </span>
            </div>
            <ul id="issueUserList" class="list-group list-inline"></ul>
        </div>

as you can see it has a data rule validation, when this returns false and the error message pops up it pushes the input-group-btn below see next image

my CSS is

.input-validation-error { border: 2px solid red; }

.field-validation-error { color: red; }

label.error {
    color: red;
}
input.error, textarea.error, select.error {
    color: black;
    background-color: #ebccd1;
    border-color: #ebccd1;
    border: 2px solid red;
}


div #loading {
    display: none;
}

.input-group {width: 100%}
#issueTable_length {
    margin-top: 2%;
}
.jumbotron {
    margin-top: 2%;
}

Could someone give me any advice or tell me what I'm doing wrong? Thanks in advance

Am afraid the web is still local do you require any more information i can provide? — Harry, Jan 20 '17 at 17:21
That is all the CSS. HTML there is more JS nothing on that besides the validation, the rest of the HTML is just the rest of the form do you need that as well? — Harry, Jan 20 '17 at 17:23
Don't think so, try adding `margin-bottom: -15px` to the error thing — Tinsten, Jan 20 '17 at 17:25
Add a space between required and data-rule-email on the select, I really don't know... — Tinsten, Jan 20 '17 at 17:26
i made a small test if i remove the error label with jquery they return on the normal position data-rule-emailRequired is the name of the validation class — Harry, Jan 20 '17 at 17:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133663/discussion-between-tinsten-and-avaloth-oath). — Tinsten, Jan 20 '17 at 17:31

score 1 · Answer 1 · answered Jan 20 '17 at 18:51

1

Javascript/jquery classes that fires the validation (.input-validation-error in this case) should be applied to whole input-group element and not just to select element.

answered Jan 20 '17 at 18:51

Shashank Bhatt

717
1
11
28

Hi i have done that but the same behaviour still occurs. – Harry Jan 23 '17 at 09:22

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

0

I have found my solution was to make custom error labels and append the error message there. i have followed this instructions to solve my issue https://stackoverflow.com/a/4044251/6603342

edited May 23 '17 at 12:01

Community

1
1

answered Jan 23 '17 at 09:52

Harry

3,333
3
18
28

bootstrap input group btn pushed down after jquery validation kicks in

2 Answers2