php – 如何使用Laravel 4和Twitter Bootstrap 3提供内联错误反馈？

我正在使用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的可接受实现？

谢谢！

解决方法:

这可能不是最酷的方式,但我觉得它很漂亮.

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 :: macro中使用Form :: objects,如下所示：

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;
});

然后你每输入一行：

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

你需要为密码,textarea等制作其他宏(这就是为什么我只使用第一个例子;每个输入只需要几行代码并提供所有输入类型.)

如果您想在错误时设置输入样式,例如.一个红色的边框,你可能想要第二个例子,然后将它包装在你的div.form-group或whatevers中.无论如何,选择出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 '';
});