DaniKR DaniKR - 4 months ago 33
CSS Question

How to put Bootstrap ValidationMessageFor in correct position?

I am using bootstrap for my web application, and I have problem with validationmessagefor puting message state in correct position. Now I have use this example from this link, with this code:

<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>


Now code that I use:

<h4 class="form-signin-heading">Please sign in</h4>
<div class="control-group">
<div class="controls">
@Html.TextBoxFor(u => u.Username, new {placeholder="Username", @class="form-control username", id="inputError"})
<span class="help-inner">@Html.ValidationMessageFor(u => u.Username)</span>
</div>

<div class="controls">
@Html.PasswordFor(u => u.Password, new {placeholder="Password", @class="form-control password"})
@Html.ValidationMessageFor(u=> u.Password)
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>


My code do this (also in fiddle: http://jsfiddle.net/4h5E5/1/):

enter image description here

But my disire is to put validate message in this position (like example in link):

enter image description here

Answer

Please check this JS Fiddle Link

HTML Code:

<!DOCTYPE html>
<body>
    <div class="container">
        <form class="form-signin form-horizontal" role="form">
             <h4 class="form-signin-heading">Please sign in</h4>

            <div class="form-group">
                <div class="col-xs-7 col-sm-7">
                    <input type="username" class="form-control username" placeholder="Username" required="autofocus" />
                </div>
                <div class="col-xs-7 col-sm-5"> <span class="help-inline pull-left">Please correct the error</span>

                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-7 col-sm-7">
                    <input type="password" class="form-control password" placeholder="Password" />
                </div>
                <div class="col-xs-7 col-sm-5"> <span class="help-inline pull-left">Please correct the error</span>

                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-7 col-sm-7">
                    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
                </div>
            </div>
        </form>
    </div>
    <!-- /container -->
    <!-- Bootstrap core JavaScript==================================================- ->
    <!-- Placed at the end of the document so the pages load faster -->
</body>

I hope this is what you want to achieve.

If you have any other issue or if not solved, then please add a comment below.

Regards D.