validation - 当我收到验证错误 laravel 5.3 时，如何将输入字段的边框着色为红色

Question

我的验证 Controller :

public function store(Request $request)
{
   // dd($request->all());

    /////Validations////

    $this->Validate($request, [
        'name' => 'required|min:3|',
        'email' => 'required|unique:customers' ,
        'favorite' => 'required',
        'Password' => 'required|min:6',
        'Confirm_Password' => 'required|same:Password',
        ]);

    $user = new customer;
    $user ->name=input::get("name");
    $user ->email=input::get("email");
    $user ->country=input::get("country");
    $user ->gender=input::get("gender");
    $user ->favorite=implode(" , " , input::get("favorite"));

    if(input::hasfile("image")){
        $files = Input::file('image');
        $name = time()."_". $files->getClientOriginalName();
        $image = $files->move(public_path().'/image' , $name);
        $user->image=$name;
    }

    $user ->psw=input::get("psw");

    $user->save();
    return redirect("showall");
}

插入.blade.php

<form action="store" method="post" enctype="multipart/form-data">
 <ul><span style="color:red;">{!! $errors->first('name') !!}</span></ul>
    <label for="name">Name</label>
    <input type="text" name="name" value="{{old('name')}}" id="name" autofill="off">
<input type="hidden" name="_token" value="{{csrf_token()}}">
<ul><span style="color:red;">{!! $errors->first('email') !!}</span></ul>
    <label for="email">Email</label>
    <input type="email" name="email" value="{{old('email')}}" id="email" autofill="off">
<br>
<br>
 Country&nbsp;&nbsp;&nbsp;<select name="country" id="country">
 <option value="USA">USA </option>
 <option value="ENGLAND">ENGLAND </option>
 <option value="JAPAN">JAPAN </option>
 <option value="ITALY">ITALY</option>
 </select>
  <br>
  <br>
    Gender&nbsp;&nbsp;&nbsp;<input type="radio" name="gender" value="Male">Male
    <input type="radio" name="gender" value="Female">Female
<br>
    <br>
    <ul><span style="color:red;">{!! $errors->first('favorite') !!}</span></ul>
    <input type="checkbox" name="favorite[]" value="sout">South
    <input type="checkbox" name="favorite[]" value="north">North
    <input type="checkbox" name="favorite[]" value="east">East
    <input type="checkbox" name="favorite[]" value="west">West
    <br>
    <br>
    <input type="file" name="image">
<br>
    <br>
    <ul><span style="color:red;">{!! $errors->first('Confirm_Password') !!}</span></ul>
    <label for="email">Password</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="password" name="Password" value="" id="Password">
<ul><span style="color:red;">{!! $errors->first('Confirm_Password') !!}</span></ul>
    <label for="email">Confirm Password</label>
    <input type="Password" name="Confirm_Password" value="" id="cpsw">
    <br>
    <br>
<label for="submit"></label>
    <input type="submit" name="submit" value="submit" id="submit">
 </form>

我想更改字段颜色的表单:

我想在收到验证错误时将输入字段的边框颜色更改为红色。我尽力了，但我不知道如何摆脱这个问题。

Answer 1

首先添加这段CSS代码:

.form-error {

  border: 2px solid #e74c3c;
}

HTML代码是::

<input type="text" class="form-control{{($errors->first('name') ? " form-error" : "")}}" name="name" placeholder="Name">

如果您需要在输入字段下方显示错误消息，则::

    <input class="form-control" required="required" name="name" type="text" id="name">
    {!! $errors->first('name', '<p class="help-block">:message</p>') !!}