Mark error in form using Bootstrap

Question

I ve started using Bootstrap in order to achieve a nice page design without resorting to GWT  the backend is made in java   For my login screen I copied this example  Now I want to mark an error  for instance  that the username was left empty  So I was wondering what is the procedure in the Bootstrap framework for this  Or maybe if there are examples showing the form with error    I m not sure if the idea is to show the error message inside the input element with a red color  or to show it below the input element  or maybe with a popup

User · Answer

Generally showing the error near where the error occurs is best. i.e. if someone has an error with entering their email, you highlight the email input box.

This article has a couple good examples. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

Also twitter bootstrap has some nice styling that helps with that (scroll down to the Validation states section) http://twitter.github.com/bootstrap/base-css.html#forms

Highlighting each input box is a bit more complicated, so the easy way would be to just put an bootstrap alert at the top with details of what the user did wrong. http://twitter.github.com/bootstrap/components.html#alerts

User · Answer

One can also use the following class while using bootstrap modal class  v 3 3 7      help-inline and help-block did not work in modal    lt span class  error text-danger  gt Some Errors related to something lt  span gt    Output looks like something below

User · Answer

Bootstrap V3   Official Doc Link 1 Official Doc Link 2   lt div class  form-group has-success  gt     lt label class  control-label  for  inputSuccess  gt Input with success lt  label gt     lt input type  text  class  form-control  id  inputSuccess    gt     lt span class  help-block  gt Woohoo  lt  span gt   lt  div gt   lt div class  form-group has-warning  gt     lt label class  control-label  for  inputWarning  gt Input with warning lt  label gt     lt input type  text  class  form-control  id  inputWarning  gt     lt span class  help-block  gt Something may have gone wrong lt  span gt   lt  div gt   lt div class  form-group has-error  gt     lt label class  control-label  for  inputError  gt Input with error lt  label gt     lt input type  text  class  form-control  id  inputError  gt     lt span class  help-block  gt Please correct the error lt  span gt   lt  div gt

User · Answer

For Bootstrap v4 use  has-danger for form-group wrapper  form-control-danger for input to show icon  will display   at the end of input   form-control-feedback to message wrapper  Example    x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  integrity  sha384-rwoIResjU2yc3z8GV NPeZWAv56rSmLldC3R AZzGRnGxQQKnKkoFVhFQhNUwEyJ  crossorigin  anonymous  gt  x000D   x000D   x000D   lt div class  form-group has-danger  gt  x000D     lt input type  text  class  form-control form-control-danger  gt  x000D     lt div class  form-control-feedback  gt Not valid    lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

UPDATED with examples for Bootstrap v4  v3 and v3   Examples of forms with validation classes for the past few major versions of Bootstrap   Bootstrap v4  See the live version on codepen     lt div class  container  gt     lt form gt       lt div class  form-group row  gt         lt label for  inputEmail  class  col-sm-2 col-form-label text-success  gt Email lt  label gt         lt div class  col-sm-7  gt           lt input type  email  class  form-control is-valid  id  inputEmail  placeholder  Email  gt         lt  div gt       lt  div gt        lt div class  form-group row  gt         lt label for  inputPassword  class  col-sm-2 col-form-label text-danger  gt Password lt  label gt         lt div class  col-sm-7  gt           lt input type  password  class  form-control is-invalid  id  inputPassword  placeholder  Password  gt         lt  div gt         lt div class  col-sm-3  gt           lt small id  passwordHelp  class  text-danger  gt            Must be 8-20 characters long           lt  small gt               lt  div gt       lt  div gt     lt  form gt   lt  div gt    Bootstrap v3  See the live version on codepen     lt form role  form  gt     lt div class  form-group has-warning  gt       lt label class  control-label  for  inputWarning  gt Input with warning lt  label gt       lt input type  text  class  form-control  id  inputWarning  gt       lt span class  help-block  gt Something may have gone wrong lt  span gt     lt  div gt     lt div class  form-group has-error  gt       lt label class  control-label  for  inputError  gt Input with error lt  label gt       lt input type  text  class  form-control  id  inputError  gt       lt span class  help-block  gt Please correct the error lt  span gt     lt  div gt     lt div class  form-group has-info  gt       lt label class  control-label  for  inputError  gt Input with info lt  label gt       lt input type  text  class  form-control  id  inputError  gt       lt span class  help-block  gt Username is taken lt  span gt     lt  div gt     lt div class  form-group has-success  gt       lt label class  control-label  for  inputSuccess  gt Input with success lt  label gt       lt input type  text  class  form-control  id  inputSuccess    gt       lt span class  help-block  gt Woohoo  lt  span gt     lt  div gt   lt  form gt    Bootstrap v2  See the live version on jsfiddle    The  error   success   warning and  info classes are appended to the  control-group  This is standard Bootstrap markup and styling in v2  Just follow that and you re in good shape  Of course you can go beyond with your own styles to add a popup or  inline flash  if you prefer  but if you follow Bootstrap convention and hang those validation classes on the  control-group it will stay consistent and easy to manage  at least since you ll continue to have the benefit of Bootstrap docs and examples      lt form class  form-horizontal  gt       lt div class  control-group warning  gt         lt label class  control-label  for  inputWarning  gt Input with warning lt  label gt         lt div class  controls  gt           lt input type  text  id  inputWarning  gt           lt span class  help-inline  gt Something may have gone wrong lt  span gt         lt  div gt       lt  div gt       lt div class  control-group error  gt         lt label class  control-label  for  inputError  gt Input with error lt  label gt         lt div class  controls  gt           lt input type  text  id  inputError  gt           lt span class  help-inline  gt Please correct the error lt  span gt         lt  div gt       lt  div gt       lt div class  control-group info  gt         lt label class  control-label  for  inputInfo  gt Input with info lt  label gt         lt div class  controls  gt           lt input type  text  id  inputInfo  gt           lt span class  help-inline  gt Username is taken lt  span gt         lt  div gt       lt  div gt       lt div class  control-group success  gt         lt label class  control-label  for  inputSuccess  gt Input with success lt  label gt         lt div class  controls  gt           lt input type  text  id  inputSuccess  gt           lt span class  help-inline  gt Woohoo  lt  span gt         lt  div gt       lt  div gt     lt  form gt

User · Answer

Bootstrap V3   Once i was searching for laravel features then i got to know this amazing form validation  Later on  i amended glyphicon icon features  Now  it looks great    lt div class  col-md-12  gt   lt div class  form-group has-error has-feedback  gt       lt input id  enter email  name  email  type  text  placeholder  Enter email  class  form-control   gt       lt span class  glyphicon glyphicon-remove form-control-feedback  gt  lt  span gt              lt span class  help-block  gt  lt p gt The Email field is required  lt  p gt  lt  span gt                                           lt  div gt   lt  div gt   lt div class  clearfix  gt  lt  div gt    lt div class  col-md-6  gt   lt div class  form-group has-error has-feedback  gt       lt input id  account holder name  name  name  type  text  placeholder  Name  class  form-control   gt       lt span class  glyphicon glyphicon-remove form-control-feedback  gt  lt  span gt                                                   lt span class  help-block  gt  lt p gt The Name field is required  lt  p gt  lt  span gt                                           lt  div gt   lt  div gt   lt div class  col-md-6  gt   lt div class  form-group has-error has-feedback  gt    lt input id  check np  name  check no  type  text  placeholder  Check no  class  form-control   gt    lt span class  glyphicon glyphicon-remove form-control-feedback  gt  lt  span gt   lt span class  help-block  gt  lt p gt The Check No  field is required  lt  p gt  lt  span gt                                          lt  div gt   lt  div gt    This is what it looks like    Once i completed it i thought i should implement it in Codeigniter as well  So here is the Codeigniter-3 validation with Bootstrap   Controller  function addData      this- gt load- gt library  form validation     this- gt form validation- gt set rules  email   Email   trim required valid email max length 128     if  this- gt form validation- gt run      FALSE      validation fails  Load your view   this- gt loadViews  Load your view   pass your data to view if any      else        validation pass  Your code here        View   lt div class  col-md-12  gt   lt  php    email error    form error  email      has-error has-feedback          if  empty  email error      emailData     lt span class  help-block  gt   form error  email     lt  span gt      emailClass    email error    emailIcon     lt span class  glyphicon glyphicon-remove form-control-feedback  gt  lt  span gt      else       emailClass    emailIcon    emailData              gt   lt div class  form-group  lt     emailClass   gt   gt   lt input id  enter email  name  email  type  text  placeholder  Enter email  class  form-control   gt   lt     emailIcon   gt   lt     emailData   gt   lt  div gt   lt  div gt    Output

User · Answer

Can use CSS to show error message only on error    form-group has-error  help-block       display  block      form-group  help-block       display  none       lt div class  form-group has-error  gt     lt label class  control-label  for  inputError  gt Input with error lt  label gt     lt input type  text  class  form-control  id  inputError  gt     lt span class  help-block  gt Please correct the error lt  span gt   lt  div gt

[twitter-bootstrap] Mark error in form using Bootstrap

Examples related to twitter-bootstrap