ทำเครื่องหมายข้อผิดพลาดในรูปแบบโดยใช้ Bootstrap

ฉันเริ่มใช้ Bootstrap เพื่อให้ได้การออกแบบเพจที่ดีโดยไม่ต้องใช้ GWT (แบ็กเอนด์ทำด้วยภาษาจาวา)

สำหรับหน้าจอเข้าสู่ระบบของฉันฉันคัดลอกตัวอย่างนี้ ตอนนี้ฉันต้องการทำเครื่องหมายข้อผิดพลาดตัวอย่างเช่นชื่อผู้ใช้นั้นว่างเปล่า ดังนั้นฉันสงสัยว่าขั้นตอนใดในกรอบ Bootstrap สำหรับสิ่งนี้ หรืออาจมีตัวอย่างแสดงแบบฟอร์มที่มีข้อผิดพลาด

ฉันไม่แน่ใจว่าแนวคิดนี้แสดงข้อความแสดงข้อผิดพลาดภายในองค์ประกอบอินพุตด้วยสีแดงหรือแสดงใต้องค์ประกอบอินพุตหรืออาจมีป๊อปอัปหรือไม่

(ปรับปรุงด้วยตัวอย่างสำหรับ Bootstrap v4, v3 และ v3)

ตัวอย่างของฟอร์มที่มีคลาสการตรวจสอบสำหรับ Bootstrap รุ่นใหญ่สองสามรายการที่ผ่านมา

Bootstrap v4

ดูรุ่นสดบน 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

ดูรุ่นสดบน 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

ดูรุ่นสดบน jsfiddle

.error, .success, .warningและชั้นเรียนจะผนวกเข้ากับ.info .control-groupนี่คือมาร์กอัป Bootstrap มาตรฐานและการใส่สไตล์ใน v2 เพียงทำตามนั้นและคุณจะอยู่ในสภาพดี แน่นอนว่าคุณสามารถก้าวไปข้างหน้าด้วยสไตล์ของคุณเองเพื่อเพิ่มป๊อปอัปหรือ "inline flash" หากคุณต้องการ แต่ถ้าคุณทำตามแบบแผน Bootstrap และวางคลาสการตรวจสอบความถูกต้องลงบน.control-groupมันจะคงความสอดคล้องและง่ายต่อการจัดการ จะได้รับประโยชน์จากเอกสารและตัวอย่าง 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 :

ทางการเชื่อมโยง Doc 1
ทางการ 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>

ท่านสามารถใช้คลาสต่อไปนี้ขณะใช้คลาส bootstrap modal (v 3.3.7) ... help-inline และ help-block ไม่ทำงานใน modal

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

ผลลัพธ์มีลักษณะดังนี้:

Bootstrap V3:

เมื่อฉันกำลังค้นหาคุณสมบัติ laravel แล้วฉันได้รู้การตรวจสอบรูปแบบที่น่าตื่นตาตื่นใจนี้ หลังจากนั้นฉันแก้ไขฟีเจอร์ไอคอน glyphicon ตอนนี้มันดูดี

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

นี่คือสิ่งที่ดูเหมือนว่า:

เมื่อฉันทำเสร็จฉันคิดว่าฉันควรนำไปใช้ใน Codeigniter เช่นกัน ดังนั้นนี่คือการตรวจสอบ Codeigniter-3 ด้วย Bootstrap:

ตัวควบคุม

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

ดู

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

เอาท์พุท:

โดยทั่วไปแล้วแสดงข้อผิดพลาดใกล้กับที่เกิดข้อผิดพลาดที่ดีที่สุด เช่นถ้ามีคนมีข้อผิดพลาดในการป้อนอีเมลของพวกเขาคุณเน้นกล่องใส่อีเมล

บทความนี้มีตัวอย่างที่ดีสองสาม http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/

นอกจากนี้ twitter bootstrap มีสไตล์ที่ดีที่ช่วยด้วย (เลื่อนลงไปที่ส่วนการตรวจสอบสถานะ) http://twitter.github.com/bootstrap/base-css.html#forms

การไฮไลต์กล่องอินพุตแต่ละกล่องนั้นซับซ้อนกว่าเล็กน้อยดังนั้นวิธีที่ง่ายที่สุดคือการใส่การแจ้งเตือนการบูตที่ด้านบนพร้อมรายละเอียดว่าผู้ใช้ทำอะไรผิด http://twitter.github.com/bootstrap/components.html#alerts

สำหรับการใช้ Bootstrap v4:
has-dangerสำหรับform-groupwrapper
form-control-dangerสำหรับการป้อนเพื่อแสดงไอคอน (จะแสดง✖ที่ส่วนท้ายของอินพุต)
form-control-feedbackไปที่ wrapper ข้อความ

ตัวอย่าง:

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

สามารถใช้ CSS เพื่อแสดงข้อความข้อผิดพลาดเฉพาะในข้อผิดพลาด

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