在 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>
谢谢!
我认为没有一种简单的方法可以用 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')
您可以轻松使用表单宏,这里有一堆可用于 Bootstrap 3
:http://forums.laravel.io/viewtopic.php?id=11960
希望这有帮助...
感谢您的努力,尤其是@AndHeiberg。为了简单起见,我决定放弃Laravel-Bootstrap验证,改用jquery插件:https://github.com/jzaefferer/jquery-validation
主要原因是它非常易于使用。调用插件并在标签中插入"必需"就足够了。插件将完成所有其余的工作,以红色突出显示该字段并显示该字段的错误消息。
如果您的目的是使错误更明显,则可以将从Laravel验证错误返回的消息文本包装在一个范围内,并为其提供样式。
{{ $errors->first('email', "<span class='error'>:message</span>")}}
其中:message
是错误消息的"占位符"。然后,您可以根据需要为.error
跨度提供任何样式。查看此 Laracast 课程以获取更多详细信息(3:10 之后)。
在引导程序中,您可以创建 id 为 "inputError" 的 errorfield:
<input type="text" class="form-control" id="inputError">