Bootstrap Tutorial - Style the validation states with Bootstrap








Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!-- w w w  .  j a v a  2  s.  co m-->
<body style='margin: 20px;'>

  <form class="form-inline">
    <div class="form-group has-warning">
      <label class="control-label" for="inputWarning">Input with
        warning</label> <input type="text" class="form-control" id="inputWarning">
    </div>
    <div class="form-group has-error">
      <label class="control-label" for="inputError">Input with
        error</label> <input type="text" class="form-control" id="inputError">
    </div>
    <div class="form-group has-success">
      <label class="control-label" for="inputSuccess">Input with
        success</label> <input type="text" class="form-control" id="inputSuccess">
    </div>
  </form>

</body>
</html>

Click to view the demo