Laravel 5 验证 - 表单元素上的错误类答案

【问题标题】：Laravel 5 Validation - error class on form elementsLaravel 5 验证 - 表单元素上的错误类
【发布时间】：2016-02-05 22:28:18
【问题描述】：

我的验证表单工作正常，看起来像这样：

{!! Form::email('email', null, array('placeholder' => 'Email', 'class' => 'form-control ')) !!}
{{$errors->first('email')}}

如果邮件不好，我会收到这个错误：邮件已经被占用了。

问题是我不想像error那样在输入上放置一个css类，以便为输入添加红色背景边框。

我该怎么做？

【问题讨论】：

enter link description here stackoverflow.com/questions/39637788/…

标签： php css laravel laravel-4 laravel-5

【解决方案1】：

添加自定义错误信息

'custom' => array(
    'email' => array(
        'required' => 'We need to know your e-mail address!',
    ),
),

Custom Error Messages in Laravel

【讨论】：

我不需要自定义错误消息。我需要一个 css 类添加到我的输入中。

【解决方案2】：

您可以在其周围添加 HTML 并根据需要设置样式。

HTML：

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

CSS：

.error {
    border: 1px solid red;
}

编辑：将has-error 类添加到输入本身，如下所示：

{!! Form::email('email', null, array('placeholder' => 'Email', 'class' => 'form-control ' . $errors->first('email', 'has-error'))) !!}

【讨论】：

我不需要创建新元素。我需要一个 CSS 类添加到我的电子邮件输入中。
有一个非常简单的解决方案。 :) 检查我的编辑。

【解决方案3】：

像这样将类 has-error 添加到您的表单中

{!! Form::email('email', null, array('placeholder' => 'Email', 'class' => 'form-control has-error')) !!}

如果有错误可以使用if条件，设置类

@if($errors->has('email'))
    {!! Form::email('email', null, array('placeholder' => 'Email', 'class' => 'form-control has-error')) !!}
@else
    {!! Form::email('email', null, array('placeholder' => 'Email', 'class' => 'form-control')) !!}
@endif

或者你可以这样做

<input class="form-control {{ $errors->has('email') ? 'has-error' : '' }}" name="email" placeholder="Email">

【讨论】：

只有在表单验证失败时才会出现该类，而不是总是像您所建议的那样。

【解决方案4】：

您可以使用 if 条件来检查错误：

 <div class="form-group {{ $errors->has('email') ? 'has-error' :'' }}">
   {!! Form::text('email',null,['class'=>'form-control','placeholder'=>'Email Address']) !!}
   {!! $errors->first('email','<span class="help-block">:message</span>') !!}
</div>

【讨论】：

【解决方案5】：

<script> 
  if({{$errors->has('email')}}){
    $(input[type="email"]).css('border-color', 'red');
  }
</script>

【讨论】：

【解决方案6】：

这对我来说是正确的答案，没有使用额外的div's：

{!! Form::email('email', null, $attributes = $errors->has('email') ? array('placeholder' => 'Email', 'class' => 'form-control has-error') : array('placeholder' => 'Email', 'class' => 'form-control')) !!} 
{{$errors->first('email')}}

【讨论】：

这个问题是输入在 Bootstrap 中没有 .has-error 类。这需要从父 div 应用。否则，这是一个很好的解决方案。

【解决方案7】：

您可以使用以下代码检查电子邮件字段是否有任何验证错误

 <div class="form-group has-feedback @if($errors->has('email') has-error @endif">
        <input name="email" class="form-control"/>
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
        @if ($errors->has('email')) <p class="help-block"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            {{ $errors->first('email') }}</p>
        @endif
    </div>

【讨论】：

当您尝试实现主题/样式形式时的有用答案。请注意第一个 div 类中的语法错误； if 语句括号 ) 丢失