Tandai kesalahan dalam formulir menggunakan Bootstrap

Saya sudah mulai menggunakan Bootstrap untuk mencapai desain halaman yang bagus tanpa menggunakan GWT (backend dibuat di java)

Untuk layar login saya, saya menyalin contoh ini . Sekarang saya ingin menandai kesalahan, misalnya, bahwa nama pengguna dibiarkan kosong. Jadi saya bertanya-tanya apa prosedur dalam kerangka Bootstrap untuk ini. Atau mungkin jika ada contoh yang menunjukkan formulir dengan kesalahan.

Saya tidak yakin apakah idenya adalah untuk menampilkan pesan kesalahan di dalam elemen input dengan warna merah, atau untuk menunjukkannya di bawah elemen input, atau mungkin dengan popup?

(DIPERBARUI dengan contoh untuk Bootstrap v4, v3 dan v3)

Contoh formulir dengan kelas validasi untuk beberapa versi utama Bootstrap yang lalu.

Bootstrap v4

Lihat versi live di codepen

<div class="container">
  <form>
    <div class="form-group row">
      <label for="inputEmail" class="col-sm-2 col-form-label text-success">Email</label>
      <div class="col-sm-7">
        <input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email">
      </div>
    </div>

    <div class="form-group row">
      <label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
      <div class="col-sm-7">
        <input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
      </div>
      <div class="col-sm-3">
        <small id="passwordHelp" class="text-danger">
          Must be 8-20 characters long.
        </small>      
      </div>
    </div>
  </form>
</div>

Bootstrap v3

Lihat versi live di codepen

<form role="form">
  <div class="form-group has-warning">
    <label class="control-label" for="inputWarning">Input with warning</label>
    <input type="text" class="form-control" id="inputWarning">
    <span class="help-block">Something may have gone wrong</span>
  </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">
    <span class="help-block">Please correct the error</span>
  </div>
  <div class="form-group has-info">
    <label class="control-label" for="inputError">Input with info</label>
    <input type="text" class="form-control" id="inputError">
    <span class="help-block">Username is taken</span>
  </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" />
    <span class="help-block">Woohoo!</span>
  </div>
</form>

Bootstrap v2

Lihat versi live di jsfiddle

The .error, .success, .warningdan .infokelas ditambahkan ke .control-group. Ini adalah markup dan penataan Bootstrap standar di v2. Ikuti saja itu dan Anda dalam kondisi yang baik. Tentu saja Anda dapat melampaui gaya Anda sendiri untuk menambahkan popup atau "inline flash" jika Anda mau, tetapi jika Anda mengikuti konvensi Bootstrap dan menggantung kelas validasi di .control-groupatasnya akan tetap konsisten dan mudah dikelola (setidaknya karena Anda ' akan terus mendapatkan manfaat dari dokumentasi dan contoh Bootstrap)

  <form class="form-horizontal">
    <div class="control-group warning">
      <label class="control-label" for="inputWarning">Input with warning</label>
      <div class="controls">
        <input type="text" id="inputWarning">
        <span class="help-inline">Something may have gone wrong</span>
      </div>
    </div>
    <div class="control-group error">
      <label class="control-label" for="inputError">Input with error</label>
      <div class="controls">
        <input type="text" id="inputError">
        <span class="help-inline">Please correct the error</span>
      </div>
    </div>
    <div class="control-group info">
      <label class="control-label" for="inputInfo">Input with info</label>
      <div class="controls">
        <input type="text" id="inputInfo">
        <span class="help-inline">Username is taken</span>
      </div>
    </div>
    <div class="control-group success">
      <label class="control-label" for="inputSuccess">Input with success</label>
      <div class="controls">
        <input type="text" id="inputSuccess">
        <span class="help-inline">Woohoo!</span>
      </div>
    </div>
  </form>

Bootstrap V3 :

Tautan Resmi Doc 1 Tautan
Resmi Doc 2

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess" />
  <span class="help-block">Woohoo!</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning">
  <span class="help-block">Something may have gone wrong</span>
</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">
  <span class="help-block">Please correct the error</span>
</div>

Seseorang juga dapat menggunakan kelas berikut saat menggunakan kelas modal bootstrap (v 3.3.7) ... bantuan-inline dan bantuan-blok tidak berfungsi dalam modal.

<span class="error text-danger">Some Errors related to something</span>

Outputnya terlihat seperti di bawah ini:

Bootstrap V3:

Setelah saya mencari fitur laravel maka saya mengetahui validasi form yang menakjubkan ini. Kemudian, saya mengubah fitur ikon glyphicon. Sekarang, ini terlihat hebat.

<div class="col-md-12">
<div class="form-group has-error has-feedback">
    <input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>       
    <span class="help-block"><p>The Email field is required.</p></span>                                        
</div>
</div>
<div class="clearfix"></div>

<div class="col-md-6">
<div class="form-group has-error has-feedback">
    <input id="account_holder_name" name="name" type="text" placeholder="Name" class="form-control ">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>                                            
    <span class="help-block"><p>The Name field is required.</p></span>                                        
</div>
</div>
<div class="col-md-6">
<div class="form-group has-error has-feedback">
 <input id="check_np" name="check_no" type="text" placeholder="Check no" class="form-control ">
 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block"><p>The Check No. field is required.</p></span>                                       
</div>
</div>

Seperti inilah tampilannya:

Setelah saya menyelesaikannya saya pikir saya harus mengimplementasikannya di Codeigniter juga. Jadi di sini adalah validasi Codeigniter-3 dengan Bootstrap:

Pengendali

function addData()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('email','Email','trim|required|valid_email|max_length[128]');
if($this->form_validation->run() == FALSE)
{
//validation fails. Load your view.
$this->loadViews('Load your view','pass your data to view if any');
}
else
{  
 //validation pass. Your code here.
}
}

Melihat

<div class="col-md-12">
<?php 
 $email_error = (form_error('email') ? 'has-error has-feedback' : '');
 if(!empty($email_error)){
 $emailData = '<span class="help-block">'.form_error('email').'</span>';
 $emailClass = $email_error;
 $emailIcon = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
}
else{
    $emailClass = $emailIcon = $emailData = '';
 } 
 ?>
<div class="form-group <?= $emailClass ?>">
<input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
<?= $emailIcon ?>
<?= $emailData ?>
</div>
</div>

Keluaran:

Umumnya menampilkan kesalahan di dekat tempat kesalahan terjadi adalah yang terbaik. yaitu jika seseorang memiliki kesalahan dalam memasukkan email mereka, Anda menyorot kotak input email.

Artikel ini memiliki beberapa contoh yang bagus. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

Bootstrap twitter juga memiliki gaya yang bagus yang membantu dengan itu (gulir ke bawah ke bagian Status validasi) http://twitter.github.com/bootstrap/base-css.html#forms

Menyoroti setiap kotak input sedikit lebih rumit, jadi cara mudahnya adalah dengan memasang peringatan bootstrap di bagian atas dengan detail kesalahan yang dilakukan pengguna. http://twitter.github.com/bootstrap/components.html#alerts

Untuk penggunaan Bootstrap v4:
has-dangeruntuk form-grouppembungkus,
form-control-dangeruntuk input untuk menampilkan ikon (akan menampilkan ✖ di akhir input),
form-control-feedbackke pembungkus pesan

Contoh:

<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">


<div class="form-group has-danger">
  <input type="text" class="form-control form-control-danger">
  <div class="form-control-feedback">Not valid :(</div>
</div>

Dapat menggunakan CSS untuk menampilkan pesan kesalahan hanya pada kesalahan.

.form-group.has-error .help-block {
    display: block;
}

.form-group .help-block {
    display: none;
}


<div class="form-group has-error">
  <label class="control-label" for="inputError">Input with error</label>
  <input type="text" class="form-control" id="inputError">
  <span class="help-block">Please correct the error</span>
</div>