How to validate Twitter Bootstrap forms

Bootstrap provides user friendly and powerful mechanism for styling input controls presenting different validation states. Bootstrap includes validation styles for error, warning, and success messages. To utilize, just add the correct class to the surrounding .form-group.

Will there be a bit of good plugin to validate bootstrap forms? Or else, suggest links where I will get code validating them.

There are a lot of options out there:

• jQuery validation
• Form validation forbootstrap
• Validator

Example Code :

Use of html 

 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">

  <div class="panel panel-primary">

    <div class="panel-heading">Have A Query ? Fill The Form Below & Get A Call From Our Counsellors Now !</div>

 <div class="panel-body">

<form name="form1" id="form1" method="post" class="form-horizontal" action="#" novalidate="novalidate">

    <div class="form-group">

    <label class=" col-md-3 control-label" for="name">Name</label>

    <div class="col-md-8"><input type="text" name="name" id="name" class="form-control"></div>

    </div>

    <div class="form-group">

    <label class="col-md-3 control-label" for="email">E-mail</label>

    <div class="col-md-8"><input type="text" name="email" id="email" class="form-control"></div>

    </div>

    <div class="form-group">

    <label class="col-md-3 control-label" for="mobile">Mobile</label>

    <div class="col-md-8"><input type="text" name="mobile" id="mobile" class="form-control"></div>

    </div>

    <div class="form-group">

    <label class="col-md-3 control-label" for="city">City</label>

    <div class="col-md-8"><input type="text" name="city" id="city" class="form-control"></div>

    </div>

    <div class="form-group">

    <label class="col-md-3 control-label" for="course">Course</label>

    <div class="col-md-8 selectContainer">

    <select name="course" class="form-control">

    <option value="" selected="">----Select Course----</option>

    <option value="Mobile Repairing Course">Mobile Repairing Course</option>

    <option value="Advance Mobile Repairing Course">Advance Mobile Repairing Course</option>

    <option value="Laptop Repairing Course">Laptop Repairing Course</option>

    <option value="Advance Laptop Repairing Course">Advance Laptop Repairing Course</option>

    </select>

    </div>

    </div>

    

    <div class="form-group">

    <div class="col-md-6 col-md-offset-5"><input type="submit" value="Submit" name="btnsend" class="btn btn-primary"></div>

    </div>

    

</form>

    </div>

  </div>

 </div>

Use of css 

• bootstrap.min.css
• bootstrapValidator.min.css

Use of js

• bootstrapValidator.min.js
• jquery.form.min.js
• jquery-1.7.1.min.js

Use of img

• checked.gif
• error.png
• valid.png

The output of example will look something like this :

Supported Form Controls in Bootstrap

Bootstrap includes support for several standard form controls as well as new HTML5 input types such as datetime, number, email, url, search, tel, color etc. These example will show you the usages of standard form controls with Bootstrap.

Read More

Unknown 05:30  No comment

Extending Form Controls with Bootstrap

Bootstrap includes {some other|various other|several other} useful form components {to make|to create|to produce} your form more attractive.

Creating Prepended and Appended Inputs

{You can add|You can include|You could add} text and icons or buttons before or after any text-based input.

To prepend or append text and icons to {an input|an insight}:

• Wrap {the text|the writing} or icon {within a|inside a|in just a} element {having the|getting the|obtaining the} class .input-group-addon and {place it|put it|stick it} before or {after the|following the}  element.
• Wrap {both the|both|the} and text-based  element {within a|inside a|in just a}element and apply the class .input-group on it.

Example Code :

<form>
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Amount">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="US Dollar">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
</form>

The output of example will look something like this :

Read More

Unknown 04:49  No comment

Creating Forms with Bootstrap

HTML structures will be the vital little bit of the website pages, however styling the structure controls physically 1 by 1 utilizing CSS could be a repetitive procedure. Bootstrap significantly disentangles the styling procedure of structure controls like information boxes, select boxes, content ranges, and so on.

Bootstrap provides three different types of form layouts :

1. Vertical Form (default form layout)
2. Horizontal Form
3. Inline Form

Creating Vertical Form Layout

This is actually the default Bootstrap structure design by which styles are linked to shape controls without adding any base class to the component or any expansive changes in the markup. 

The structure controls in this design are stacked with left-adjusted marks on the top.

Example Code :

<form>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>

Vertical Form Design

Creating Horizontal Form Layout

In horizontal form layout labels are right aligned and floated to left to create them appear on a single line as form controls. The horizontal form layout requires the many markup changes from the default form layout. Steps to achieve this layout are listed below :

• Add the class .form-horizontal to the element.
• Wrap labels and form controls in a
• element and apply the class .form-group.
• Use Bootstrap's predefined grid classes to align labels and form controls.
• Add the class .control-label to the element.

Example Code :

<form class="form-horizontal">

<div class="form-group">

<label for="inputEmail" class="control-label col-xs-2">Email</label>

<div class="col-xs-10">

<input type="email" class="form-control" id="inputEmail" placeholder="Email">

</div>

</div>

<div class="form-group">

<label for="inputPassword" class="control-label col-xs-2">Password</label>

<div class="col-xs-10">

<input type="password" class="form-control" id="inputPassword" placeholder="Password">

</div>

</div>

<div class="form-group">

<div class="col-xs-offset-2 col-xs-10">

<div class="checkbox">

<label><input type="checkbox"> Remember me</label>

</div>

</div>

</div>

<div class="form-group">

<div class="col-xs-offset-2 col-xs-10">

<button type="submit" class="btn btn-primary">Login</button>

</div>

</div>

</form>

The output of example will look something like this :

Creating Inline Form Layout

Sometimes you might require to position the appropriate execution controls side-by-side to compact the layout. You can certainly do this easily with the addition of the Bootstrap class .form-incline to the element.

Example Code :

<form class="form-inline">

<div class="form-group">

<label class="sr-only" for="inputEmail">Email</label>

<input type="email" class="form-control" id="inputEmail" placeholder="Email">

</div>

<div class="form-group">

<label class="sr-only" for="inputPassword">Password</label>

<input type="password" class="form-control" id="inputPassword" placeholder="Password">

</div>

<div class="checkbox">

<label><input type="checkbox"> Remember me</label>

</div>

<button type="submit" class="btn btn-primary">Login</button>

</form>

The output of example will look something like this :

Read More

Unknown 04:17  No comment