Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap form validation states

Suggested Video Tutorials
Part 20 - Bootstrap forms
Part 21 - Bootstrap form controls
Part 22 - Bootstrap disabled and readonly form controls



In this video, we will discuss the bootstrap classes that can be used to style the form controls based on their validation state.



The following are the boostrap classes and glyphicons that can be used to style the form controls depending on the validation state i.e success, warning or error
Class Glyphicon Purpose
has-success glyphicon glyphicon-ok Success Validation State
has-warning glyphicon glyphicon-warning-sign Warning Validation State
has-error glyphicon glyphicon-remove Error Validation State


The following example, styles the form controls depending on their validation state. The bootstrap validation classes (has-success, has-warning & has-error) are being used on the parent <div> element. We are also using help-block class to display the help text associated with the form control.
bootstrap form validation example

<form class="form-horizontal">
    <div class="form-group has-success">
        <label class="col-xs-2 control-label" for="txtStrongPassword">Password</label>
        <div class="col-xs-10">
            <input type="password" id="txtStrongPassword" class="form-control"
                    placeholder="Your password">
            <span class="help-block">Strong Password</span>
        </div>
    </div>
    <div class="form-group has-warning">
        <label class="col-xs-2 control-label" for="txtWeakPassword">Password</label>
        <div class="col-xs-10">
            <input type="password" id="txtWeakPassword" class="form-control"
                    placeholder="Your password">
            <span class="help-block">Weak Password</span>
        </div>
    </div>
    <div class="form-group has-error">
        <label class="col-xs-2 control-label" for="txtAge">Age</label>
        <div class="col-xs-10">
            <input type="number" id="txtAge" class="form-control"
                    placeholder="Your Age">
            <span class="help-block">Invalid Age</span>
        </div>
    </div>
</form>

In the following example, we are also displaying the validation icons depending on the validation state of the control. To use icons we also have to use has-feedback and form-control-feedback classes. Please note that Icons only work with textual <input> elements
bootstrap 3 form validation icons

<form class="form-horizontal">
    <div class="form-group has-success has-feedback">
        <label class="col-xs-2 control-label" for="txtStrongPassword">Password</label>
        <div class="col-xs-10">
            <input type="password" id="txtStrongPassword" class="form-control"
                    placeholder="Your password">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
            <span class="help-block">Strong Password</span>
        </div>
    </div>
    <div class="form-group has-warning has-feedback">
        <label class="col-xs-2 control-label" for="txtWeakPassword">Password</label>
        <div class="col-xs-10">
            <input type="password" id="txtWeakPassword" class="form-control"
                    placeholder="Your password">
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
            <span class="help-block">Weak Password</span>
        </div>
    </div>
    <div class="form-group has-error has-feedback">
        <label class="col-xs-2 control-label" for="txtAge">Age</label>
        <div class="col-xs-10">
            <input type="number" id="txtAge" class="form-control"
                    placeholder="Your Age">
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
            <span class="help-block">Invalid Age</span>
        </div>
    </div>
</form>

The following example, styles the input groups depending on their validation state. As you can see, styling input groups is similar to styling regular form controls.
bootstrap input group addon validation

<form class="form-horizontal">
    <div class="form-group has-success has-feedback">
        <label class="col-xs-2 control-label" for="txtStrongPassword">Income</label>
        <div class="col-xs-10">
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" id="txtIncome" class="form-control"
                        placeholder="Your annual income after taxes">
            </div>
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
            <span class="help-block">Success</span>
        </div>
    </div>
    <div class="form-group has-warning has-feedback">
        <label class="col-xs-2 control-label" for="txtStrongPassword">Income</label>
        <div class="col-xs-10">
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" id="txtIncome" class="form-control"
                        placeholder="Your annual income after taxes">
            </div>
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
            <span class="help-block">Warning</span>
        </div>
    </div>
    <div class="form-group has-error has-feedback">
        <label class="col-xs-2 control-label" for="txtStrongPassword">Income</label>
        <div class="col-xs-10">
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" id="txtIncome" class="form-control"
                        placeholder="Your annual income after taxes">
            </div>
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
            <span class="help-block">Error</span>
        </div>
    </div>
</form>

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.