Bootstrap text-danger with form-inline not aligned

5.6k views Asked by At

I have a simple form with error handling through jqBootstrapValidation. I set it up so that it is horizontal when the browser is wide enough. Here is how it looks: https://i.stack.imgur.com/GCK3r.png

However, when I enter a bad email, the form is not aligned anymore. https://i.stack.imgur.com/SYkcY.png

Here is the code I am using. I just can't get it to work.

<form class="form-inline">
            <div class="form-group form-group-lg">
                    <div class="col-lg-6 text-center">
                        <label class="sr-only" for="name">Full Name</label>
                        <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name." >
                        <p class="help-block text-danger"></p>
                     </div>
             </div>

            <div class="form-group form-group-lg">
                    <div class="col-lg-6 text-center">
                        <label class="sr-only" for="name">Your email</label>
                        <input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="email not valid">
                        <p class="help-block text-danger"></p>
                     </div>
             </div>

            <div class="col-lg-12 text-center">
                    <div id="success"></div>
                    <button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
            </div>
        </form>         

Any tips? Thanks a lot!

3

There are 3 answers

0
CharleyB0y On BEST ANSWER

With the various answers I got. I managed to get it working. Here is the final code.

<form>
    <div class="row">
    <div class="col-sm-6 text-center">
        <div class="form-group form-group-lg">
            <label class="sr-only" for="name">Full Name</label>
            <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name.">
            <div class="help-block text-danger"></div>
         </div>
     </div>

    <div class="col-sm-6 text-center">
        <div class="form-group form-group-lg">
            <label class="sr-only" for="name">Your email</label>
            <input type="email" class="form-control" type="text" id="formGroupInputLarge"  placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="Email is not valid">
            <div class="help-block text-danger"></div>
         </div>
     </div>
    </div>

    <div class="row">
    <div class="col-sm-12 text-center">
            <input type="hidden" name="location" value="toronto">
            <div id="success"></div>
            <button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
    </div>
</div></form>       

Feel free to comment if you see a problem with my answer!

0
Steve On

The issue is that the error message is appearing int he same column and pushing the textbox up. I believe you would either have to add it to another column or row below the content.

I don't know if this would help you but when I do bootstrap validation I add the tooltip attributes and the has error class to the div.

<div class="form-group has-error">
    <input id="txtEmail" type="text" class="form-control" data-toggle="tooltip" data-placement="right" title="Email is not valid.">
</div>

This highlights the textbox red and the error message is displayed on hover so it saves space.

2
crazymatt On

The way your HTML is set up is incorrect. You need to have the <div class="col-lg-6"> end and begin next to each other. The way you have it set up now is the form-group is on the outside with the table-cells inside. Also you should have the <div class="row"> so the table knows when a new row has been added.

<form class="form-inline">
    <div class="row">
        <div class="col-lg-6 text-center">
            <div class="form-group form-group-lg">
                <label class="sr-only" for="name">Full Name</label>
                <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name.">
                <p class="help-block text-danger"></p>
            </div>
        </div>
        <div class="col-lg-6 text-center">
            <div class="form-group form-group-lg">
                <label class="sr-only" for="name">Your email</label>
                <input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="email not valid">
                <p class="help-block text-danger"></p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 text-center">
            <div id="success"></div>
            <button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
        </div>
    </div>
</form>

Try this set up and see if your code alignment messes up or not.