laravel Laravel4+Bootstrap:如何在验证错误时使字段变为红色
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19924849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel4+Bootstrap: How to make fields red on validation error
提问by FrancescoMussi
Inside a Laravel4 + Bootstrap 2.3.1 I have a form properly working with validation. There are three fields obligatory: Name - Email - Phone.
在 Laravel4 + Bootstrap 2.3.1 中,我有一个可以正常使用验证的表单。有三个必填字段:姓名 - 电子邮件 - 电话。
When nothing is inserted, or the email is not in a proper format, the error messages are displayed. But besides this, I would like to make the fields red, to show better where the error is. How can I do this in Laravel + Bootstrap?
如果未插入任何内容或电子邮件格式不正确,则会显示错误消息。但除此之外,我想让字段变红,以更好地显示错误所在。我怎样才能在 Laravel + Bootstrap 中做到这一点?
This is the form with the three fields obligatory:
这是具有三个必填字段的表格:
<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>
Thank you very much!
非常感谢!
回答by AndHeiberg
I don't think there's an easy way to do this with the laravel Form class. I personally use my own package https://github.com/AndreasHeiberg/themefor this. You can use it if you wan't but it's subject to change.
我认为使用 laravel Form 类没有一种简单的方法可以做到这一点。我个人为此使用我自己的包https://github.com/AndreasHeiberg/theme。如果你不想,你可以使用它,但它可能会发生变化。
Anyway raw code to do this is the following:
无论如何,执行此操作的原始代码如下:
<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>
This being the important part
这是重要的部分
<div class="control-group {{ $errors->has($id) ? 'error' : false }}">
You can wrap this up in a form macro http://laravel.com/docs/html#custom-macrosuse a helper function or my package to do this.
您可以将其包装在表单宏http://laravel.com/docs/html#custom-macros 中,使用辅助函数或我的包来执行此操作。
With my package you would just use:
使用我的包,您只需使用:
+@formText('name')
回答by Codeforest
You can easily use Form macros, there is a bunch available here for Bootstrap 3:
您可以轻松使用表单宏,Bootstrap 3 这里有很多可用的宏:
http://forums.laravel.io/viewtopic.php?id=11960
http://forums.laravel.io/viewtopic.php?id=11960
Hope this helps...
希望这可以帮助...
回答by mavili
If your intention is to make the error more obvious to where it is, you can wrap the message text that is returned from Laravel validation errors in a span and give styling to that.
如果您的目的是使错误更明显,您可以将 Laravel 验证错误返回的消息文本包装在一个跨度中,并为其设置样式。
{{ $errors->first('email', "<span class='error'>:message</span>")}}
where :message
is a "placeholder" for your error message. And then you can give any styling to .error
spans as you wish. Check this Laracast lessonfor more details (after 3:10).
这里:message
是一个“占位符”为您的错误信息。然后您可以.error
根据需要为跨度提供任何样式。查看此Laracast 课程以获取更多详细信息(3:10 之后)。
回答by FrancescoMussi
Thanks for your efforts, especially @AndHeiberg. For reason of simplicity, i decide to renounce to Laravel-Bootstrap validation and use instead a jquery plugin: https://github.com/jzaefferer/jquery-validation
感谢您的努力,尤其是@AndHeiberg。为简单起见,我决定放弃 Laravel-Bootstrap 验证并使用 jquery 插件:https: //github.com/jzaefferer/jquery-validation
The main reason is that is extremely easy to use. It's enough to call the plugin and insert 'required' into the tag. And the plugin will do all the rest, highlighting the field in red and displaying an error message for that field.
主要原因是它非常易于使用。调用插件并在标签中插入“required”就足够了。插件将完成剩下的所有工作,以红色突出显示该字段并显示该字段的错误消息。
回答by Realit?tsverlust
In bootstrap, you can create errorfield with the id "inputError":
在引导程序中,您可以创建 ID 为“inputError”的错误字段:
<input type="text" class="form-control" id="inputError">