Form control state (validation state) in bootstrap _javascript tips

When making a form, it is unavoidable to make form verification. You also need to provide validation status styles, which are also available in the bootstrap framework.

1. Has-warning: Warning Status (yellow)

2. Has-error: Error status (red)

3. Has-success: Success status (Green)

You only need to add the State class name on the Form-group container when you use it.

<form role= "Form" >
<div class= "Form-group has-success" > <label class= "Control-label" for= "
InputSuccess1 "> Success status </label>
<input type=" text "class=" Form-control "id=" inputSuccess1 "placeholder = "Success Status" >
</div>
<div class= "Form-group has-warning" >
<label class= "Control-label" For= "InputWarning1" > Warning status </label>
<input type= "text" class= "Form-control" id= "InputWarning1" placeholder= "Warning Status" >
</div>
<div class= "Form-group has-error" >
<label class= " Control-label "for=" InputError1 "> Error status </label>
<input type=" text "class=" Form-control "id=" InputError1 "placeholder= Error State" >
</div>

The results of the operation are as follows or view the right result window:

Many times, in the form of verification, different States will provide different icon, such as success is a check (√), error is a fork (x) and so on. This effect is also provided in the Bootstrap box. If you want the form to display icon in the corresponding state, simply add the class name "Has-feedback" in the corresponding state. Note that this class name is to be associated with "Has-error", "has-warning", and "has-success":

 <form role= "form" > <div class= "form-group" has-success has-feedback "> <label class= "Control-label" for= "InputSuccess1" > Success status </label> <input type= "text" class= "Form-control" id= " InputSuccess1 "placeholder=" Success status > <span class= "Glyphicon glyphicon-ok form-control-feedback" ></span > </div> <div class= "Form-group has-warning has-feedback" > <label class= "Control-label" for= " InputWarning1 "> Warning status </label> <input type=" text "class=" Form-control "id=" inputWarning1 "placeholder=" Warning Status "> <span class=" Glyphicon glyphicon-warning-sign form-control-feedback "></span> </div> < Div class= "Form-group has-error has-feedback" > <label class= "Control-label" for= "InputError1" > Error status </ label> <input type= "text" class= "Form-control" id= "InputError1" placeholder= "error status" > <span class= " Glyphicon glyphicon-remove form-control-feedback "></span> </div> </form> 

The results of the operation are as follows or view the right result window:

As you can see from the effect diagram, the icons reside right. The small icons in the bootstrap are made using @font-face (the following will focus on a section of content). And you must add a SPAN element to the form:

<span class= "Glyphicon glyphicon-warning-sign form-control-feedback" ></span>

The above is a small set of bootstrap to introduce the form control state (validation status), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!