부트 스트랩을 사용하여 양식에 오류 표시

GWT에 의존하지 않고 멋진 페이지 디자인을 달성하기 위해 부트 스트랩을 사용하기 시작했습니다 (백엔드는 Java로 만들어 짐)

로그인 화면을 위해이 예제를 복사했습니다 . 예를 들어, 사용자 이름이 비어 있다는 오류를 표시하고 싶습니다. 그래서 부트 스트랩 프레임 워크의 절차가 무엇인지 궁금합니다. 또는 오류가있는 양식을 보여주는 예가있을 수 있습니다.

아이디어가 입력 요소 내부에 오류 메시지를 붉은 색으로 표시하거나 입력 요소 아래에 표시하거나 팝업으로 표시할지 확실하지 않습니까?

(Bootstrap v4, v3 및 v3의 예제로 업데이트 됨)

과거 몇 가지 주요 버전의 Bootstrap에 대한 유효성 검사 클래스가있는 양식의 예.

부트 스트랩 v4

코드 펜 의 라이브 버전 보기

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

부트 스트랩 v3

코드 펜 의 라이브 버전 보기

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

부트 스트랩 v2

jsfiddle 의 라이브 버전 보기

는 .error, .success, .warning및 .info클래스가 추가됩니다 .control-group. 이것은 v2의 표준 부트 스트랩 마크 업 및 스타일입니다. 그냥 따라 가면 몸매가 좋아 물론 자신이 원하는 스타일을 넘어서 팝업이나 "인라인 플래시"를 추가 할 수도 있지만 부트 스트랩 규칙을 따르고 해당 유효성 검사 클래스를 중단 .control-group하면 일관성 있고 관리하기 쉽습니다 (적어도 부트 스트랩 문서와 예제를 계속 활용하십시오)

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

부트 스트랩 V3 :

공식 문서 링크 1
공식 문서 링크 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>

부트 스트랩 모달 클래스 (v 3.3.7)를 사용하는 동안 다음 클래스를 사용할 수도 있습니다 ... 도움말 인라인 및 도움말 차단이 모달에서 작동하지 않았습니다.

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

출력은 다음과 같습니다.

부트 스트랩 V3 :

laravel 기능을 검색하면이 놀라운 양식 유효성 검사를 알아야합니다. 나중에, 나는 글리프 콘 아이콘 기능을 수정했습니다. 자, 좋아 보인다.

<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에서도 구현해야한다고 생각했습니다. Bootstrap을 사용한 Codeigniter-3 유효성 검사는 다음과 같습니다.

제어 장치

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/

또한 트위터 부트 스트랩에는 그에 도움이되는 멋진 스타일이 있습니다 (유효성 검사 상태 섹션으로 스크롤) http://twitter.github.com/bootstrap/base-css.html#forms

각 입력 상자를 강조 표시하는 것은 조금 더 복잡하므로 쉬운 방법은 사용자가 잘못한 것에 대한 세부 정보와 함께 부트 스트랩 경고를 맨 위에 표시하는 것입니다. http://twitter.github.com/bootstrap/components.html#alerts

부트 스트랩 V4 사용을 위해 :
has-danger대한 form-group래퍼,
form-control-danger아이콘 표시에 입력 (입력의 끝에서 ✖ 표시됩니다)에 대한,
form-control-feedback메시지 래퍼

예:

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