入力前に赤色のエラーが表示される

前提・実現したいこと

is-invalidをclassに記述することにより枠が赤色で表示されるのと赤色でエラー文が表示されるように記述しました。しかしページに遷移すると本文入力が入力前に赤くなってしまいます。これを解決したいですが原因が分かりません。他のメールアドレスとタイトルも同様にエラーが発生します。

スクショ貼り付けます。

該当のソースコード

layouts.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">


    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    @yield('content')
</body>
</html>

index.blade.php
@extends('layouts.app')

@section('content')
{{--  入力に問題が無かったら次のコントローラーに送る際のルーティングを設定  --}}
<form method="POST" action="{{ route('contact.confirm') }}">
{{--  入力するフォームにはcrsf対策をする。無ければ419というエラーが出る  --}}
  @csrf
  <div class="container">
    <div class="panel-default  w-75  mx-auto card mt-5">
      <div class="panel-heading  h2 p-3 text-center bg-primary text-white">お問い合わせフォーム</div>
      <div class="panel-body">
          <!-- //hasは入力値の存在チェック firstはクエリビルダーのことで無ければ空白というエラーを出す-->
          <div class="form-group">
            <div class="my-3 mx-auto col-md-7">
              <label for="inputTitle">メールアドレス</label>
              <input type="text" class="form-control"  placeholder="メールアドレスを入力して下さい" name="email" value="{{ old('email') }}">
                @if ($errors->has('email'))
                <p class="error-message">{{ $errors->first('email') }}</p>
                @endif
            </div>
          </div>

        <div class="form-group">
          <div class="my-3 mx-auto col-md-7 col-md-offset-5">
            <label for="inputTitle">タイトル</label>
            <input type="text" class="form-control"  placeholder="タイトルを入力して下さい" name="title" value="{{ old('title') }}">
              @if ($errors->has('title'))
              <p class="error-message">{{ $errors->first('title') }}</p>
              @endif
          </div>
        </div>

        <div class="form-group">
          <div class="my-3 mx-auto col-md-7 col-md-offset-5">
            <label for="inputTitle">本文入力</label>
            <textarea rows="7" name="body" class="form-control mb-4 is-invalid"  placeholder="本文を入力して下さい">{{ old('body') }}</textarea>
            @if ($errors->has('body'))
            <p class="error-message invalid-feedback">{{ $errors->first('body') }}</p>
            @endif
              <div class="form-group row  justify-content-around">
                  <input type="submit" class="btn bg-primary text-white  btn-lg" id="page_back" value="投稿内容を送信" />
                  <input type="reset" class="btn bg-danger text-white" value="リセット" />
              </div>
      </div>
    </div>
  </div>
  </div>
</form>
@endsection

試したこと

class="is-invalid"とエラー文のクラスにclass="invalid-feedback"を紐づけることによりエラーを赤く表示ができますが見えない文字が入っているからこそエラーが発生しているのでしょうか?

補足情報（FW/ツールのバージョンなど）

laravel6.20 bootstrap4

行動規範の内容に同意します

回答1件

ベストアンサー

いえ、単に.is-invalidが「枠線を赤くする」機能があるクラスだからです。

Forms#Server side

We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.

勝手に「エラーがあったら」なんて取り方をしてくれるわけではないです。
何をバリデーション項目とするかはアプリケーション側の都合だからです。

コードより一部抜粋

css
1.was-validated .form-control:invalid, .form-control.is-invalid {
2  border-color: #dc3545;

class="is-invalid"とエラー文のクラスにclass="invalid-feedback"を紐づけることによりエラーを赤く表示ができますが

紐づけなくても、クラスなので単体で使用できます。
コード確認すると、色に関しては連動性はないと分かるはず。

$error->has()がtrueのときにis-invalidクラスを付与するようにコードを書いてください。

投稿2021/02/17 21:52

編集2021/02/17 22:00

m.ts10806

総合スコア80842

m.ts10806

2021/02/17 22:16

>他のメールアドレスとタイトルも同様にエラーが発生します。出てないですよ。「メールアドレスを入力して下さい」等のことならplaceholderですし。

Tony-Aaron

2021/02/21 15:28

返信が遅くなり大変申し訳ございません。 $error->has()がtrueのときにis-invalidクラスを付与する上記を利用して下記に反映させることができました。 <input type="text" class="form-control @if($errors->has('email')) is-invalid @endif" placeholder="メールアドレスを入力して下さい" name="email" value="{{ old('email') }}"> @if ($errors->has('email')) <p class="error-message invalid-feedback">{{ $errors->first('email') }}</p> @endif </div>

行動規範の内容に同意します