Bootstrap kullanarak formdaki işareti işaretle

GWT'ye başvurmadan güzel bir sayfa tasarımı elde etmek için Bootstrap kullanmaya başladım (arka uç java'da yapılır)

Giriş ekranım için bu örneği kopyaladım . Şimdi, örneğin, kullanıcı adının boş bırakıldığı bir hatayı işaretlemek istiyorum. Bunun için Bootstrap çerçevesinde prosedürün ne olduğunu merak ediyordum. Belki de formu hatalı gösteren örnekler varsa.

Fikir, giriş öğesinin içindeki hata mesajını kırmızı bir renkle mi yoksa giriş öğesinin altında mı, yoksa bir açılır pencereyle mi göstereceğinden emin değilim?

(Bootstrap v4, v3 ve v3 örnekleri ile GÜNCELLENDİ)

Bootstrap'ın son birkaç ana sürümü için doğrulama sınıflarına sahip form örnekleri.

Bootstrap v4

Codepen'de canlı sürüme bakın

<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

Codepen'de canlı sürüme bakın

<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

Jsfiddle canlı versiyonuna bakın

.error, .success, .warningVe .infosınıfları eklenir .control-group. Bu, v2'deki standart Bootstrap işaretlemesi ve stilidir. Sadece takip et ve iyi durumdasın. Elbette bir pop-up veya "satır içi flaş" eklemek için kendi stillerinizin ötesine geçebilirsiniz, ancak Bootstrap kuralını takip ederseniz ve bu doğrulama sınıflarını asarsanız, .control-grouptutarlı ve yönetilmesi kolay olacaktır (en azından Bootstrap dokümanlarından ve örneklerinden yararlanmaya devam eder)

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

Resmi Doc Link 1
Resmi Doc Link 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>

Bir de bootstrap modal sınıfı (v 3.3.7) kullanırken aşağıdaki sınıfı kullanabilirsiniz ... yardım inline ve yardım bloğu kipte çalışmadı.

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

Çıktı aşağıdaki gibi görünüyor:

Bootstrap V3:

Bir kez ben laravel özellikleri arıyordum sonra ben bu şaşırtıcı form doğrulama bilmek lazım. Daha sonra glifikon simge özelliklerini değiştirdim. Şimdi, harika görünüyor.

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

Öyle görünüyor:

Tamamladıktan sonra ben de Codeigniter de uygulamak gerektiğini düşündüm. İşte Bootstrap ile Codeigniter-3 doğrulaması:

kontrolör

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.
}
}

Görünüm

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

Çıktı:

Genellikle hatanın oluştuğu yerin yakınındaki hatayı göstermek en iyisidir. Birisi e-postasını girme konusunda bir hata yaparsa, e-posta giriş kutusunu işaretlersiniz.

Bu makalede birkaç iyi örnek var. http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

Ayrıca twitter bootstrap buna yardımcı olan güzel bir stile sahiptir (Doğrulama durumları bölümüne gidin) http://twitter.github.com/bootstrap/base-css.html#forms

Her bir giriş kutusunu vurgulamak biraz daha karmaşıktır, bu nedenle kolay bir yol, kullanıcının neyi yanlış yaptığının ayrıntılarıyla birlikte bir önyükleme uyarısı koymaktır. http://twitter.github.com/bootstrap/components.html#alerts

Özyükleme v4 Kullanım için:
has-dangeriçin form-groupsargı,
form-control-dangergöstermek simgesine giriş (giriş sonunda ✖ görüntüler) için,
form-control-feedbackmesaj sargıya

Misal:

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

Hata mesajını sadece hata durumunda göstermek için CSS kullanabilir.

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