Laravel4 + Bootstrap:如何在验证错误时使字段变为红色

时间:2013-11-12 09:00:25

标签: php validation twitter-bootstrap laravel laravel-4

在Laravel4 + Bootstrap 2.3.1中我有一个正确处理验证的表单。 必须有三个字段:名称 - 电子邮件 - 电话。

如果未插入任何内容,或者电子邮件格式不正确,则会显示错误消息。 但除此之外,我想让字段变红,以便更好地显示错误的位置。 我怎么能在Laravel + Bootstrap中做到这一点?

这是三个字段必须具有的形式:

<form name="room" method="post"  class="narrow_width">

 <label><span><i class="icon-user"></i></span> Name <span class="color-red">*</span></label>
  {{ Form::text('name',Input::old('name'), array('class' => 'span7 border-radius-none')) }}

  <label><span><i class="icon-envelope-alt"></i></span> Email <span class="color-red">*</span></label>
  {{ Form::text('email',Input::old('email'), array('class' => 'span7 border-radius-none')) }}

  <label><span><i class="icon-phone"></i></span> Phone number <span class="color-red">*</span></label>          
  {{ Form::text('phone',Input::old('phone'), array('class' => 'span7 border-radius-none')) }}  

  <p><button type="submit" name="submit" class="btn-u">Send Message</button></p>
 </form>

非常感谢!

5 个答案:

答案 0 :(得分:4)

我不认为使用laravel Form类有一个简单的方法。我个人使用自己的包https://github.com/AndreasHeiberg/theme。你可以使用它,但它可能会发生变化。

无论如何,执行此操作的原始代码如下:

<div class="control-group {{ $errors->has($id) ? 'error' : false }}">
    <label for="{{ $id }}" class="control-label">{{ $text }} {{ $required ? '<span class="required-red">*</span>' : ''}}</label>
    <div class="controls">
        <input type="{{ $type }}" id="{{ $id }}" name="{{ $id }}" value="{{ $value }}">
        @if ($helpText)
            <span class='help-inline'>{{ $helpText }}</span>
        @endif
        @foreach($errors->get($id) as $message)
            <span class='help-inline'>{{ $message }}</span>
        @endforeach
    </div>
</div>

这是重要的部分

<div class="control-group {{ $errors->has($id) ? 'error' : false }}">

您可以使用帮助函数或我的软件包以宏http://laravel.com/docs/html#custom-macros形式将其包装起来。

使用我的包你只需使用:

+@formText('name')

答案 1 :(得分:1)

你可以轻松使用Form宏,这里有一堆Bootstrap 3:

http://forums.laravel.io/viewtopic.php?id=11960

希望这会有所帮助......

答案 2 :(得分:0)

感谢您的努力,特别是@AndHeiberg。 为简单起见,我决定放弃Laravel-Bootstrap验证并使用jquery插件:https://github.com/jzaefferer/jquery-validation

主要原因是非常容易使用。 只需调用插件并在标签中插入“required”即可。 插件将完成所有其余工作,以红色突出显示该字段并显示该字段的错误消息。

答案 3 :(得分:0)

如果您的目的是使错误更明显,您可以在一个范围内包装从Laravel验证错误返回的消息文本,并为其设置样式。

{{ $errors->first('email', "<span class='error'>:message</span>")}}

其中:message是您的错误消息的“占位符”。然后,您可以根据需要为.error跨度提供任何样式。查看此Laracast lesson了解更多详情(3:10之后)。

答案 4 :(得分:-1)

在bootstrap中,您可以使用id“inputError”创建错误字段:

<input type="text" class="form-control" id="inputError">