如何使用Laravel 4和Twitter Bootstrap 3提供內聯錯誤反饋？

Question

我正在使用Laravel 4和Twitter Bootstrap 3構建表單，並且希望在該字段旁邊顯示錯誤消息。這是我想出的解決方案，但最終每場有15行代碼。

@section('content') 
    <div class="container"> 
     <h1>Edit User</h1> 

     {{ Form::model($user, array('route' => array('users.update', $user->id), 'method' => 'PUT', 'class' => 'form-horizontal')) }} 

     {{-- First Name field --}} 
     {{-- Start a form group. If there any errors, then highlight the field red. --}} 
     <div class="form-group {{ $errors->has('first_name') ? 'has-error' : '' }}"> 
      {{-- Display the label and the field. --}} 
      {{ Form::label('first_name', 'First Name', array('class' => 'col-sm-2 control-label')) }} 
      <div class="col-sm-5"> 
       {{ Form::text('first_name', NULL, array('class' => 'form-control', 'placeholder' => 'First Name')) }} 
      </div> 
      {{-- If there is an error, display any messages to the right of the field with a warning icon. --}} 
      @if($errors->has('first_name')) 
       <div class="col-sm-5"> 
        @foreach ($errors->get('first_name') as $message) 
         <span class="help-block"> 
          <span class="glyphicon glyphicon-warning-sign"></span> 
          {{ $message }} 
         </span> 
        @endforeach 
       </div> 
      @endif 
     </div> 

     {{-- Form buttons --}} 
     <div class="form-group"> 
      {{-- Line up the buttons with the right edge of the fields. --}} 
      <div class="col-sm-offset-2 col-sm-5"> 
       <div class="pull-right"> 
        {{-- Cancel button takes user back to profile page. --}} 
        {{ HTML::linkRoute('users.show', 'Cancel', array($user->id), array('class' => 'btn btn-default')) }} 
        {{ Form::submit('Submit', array('class' => 'btn btn-primary')) }} 
       </div> 
      </div> 
     </div> 

     {{ Form::close() }} 

    </div> 
@stop 

這是怎麼出現的：

我剛剛開始使用這兩種Laravel和Bootstap。我使用Jeffery Way's tutorial on NetTuts使表格和Coder's Guide's tutorial應用格式。

我應該使用客戶端驗證還是將其視爲Laravel 4和Bootstrap的可接受實現？

謝謝！

Answer 1

這可能不是最酷的方法，但我認爲它很漂亮。

Laravel有一個名爲Form::macro的功能，允許您對可重用的代碼片斷進行排序。你可以定義一個宏的所有類型的地方，但我只是在我的routes.php文件中拍打我的這個快速實現。

Form::macro('errorMsg', function($field, $errors){ 
    if($errors->has($field)){ 
     $msg = $errors->first($field); 
     return "<span class=\"error\">$msg</span>"; 
    } 
    return ''; 
}); 

然後在表單中使用，通過宏觀你的錯誤消息：

{{ Form::label('first_name', 'First Name:') }} 
{{ Form::text('first_name') }} 
{{ Form::errorMsg('first_name', $errors) }} 
{{-- where $errors is your Illuminate\Support\MessageBag object --}} 

爲了得到更高科技，你可以使用Form::objects在Form::macro像這樣：

Form::macro('textError', function($field, $label, $errors){ 
    $label_html = Form::label($field, $label); 
    $text_html = Form::text($field); 
    $msg_html = ''; 

    if($errors->has($field)){ 
      $msg_html.= '<span class="error">'; 
      $msg_html.= $errors->first($field); 
      $msg_html.= '</span>'; 
    } 

    return $label_html.$text_html.$msg_html; 
}); 

然後你在1行輸入：

{{ Form::textError('first_name', 'First Name:', $errors) }} 

你需要製作其他的密碼，textarea等宏（這就是爲什麼我只使用第一個例子;它只是每個輸入的幾行代碼，併爲所有輸入類型提供服務。）

如果您想對錯誤輸入進行樣式設置，例如。一個紅色的邊框，你可能會想要第二個例子，然後將它包裹在你的div.form-group或發信人。無論如何，選擇wazoo。

更新：一個更滑頭的方式來獲得在宏錯誤是通過Session::get('errors');訪問他們像這樣：

Form::macro('errorMsg', function($field){//yay! we don't have to pass $errors anymore 
    $errors = Session::get('errors'); 

    if($errors && $errors->has($field)){//make sure $errors is not null 
     $msg = $errors->first($field); 
     return "<span class=\"error\">$msg</span>"; 
    } 
    return ''; 
});