contacフォームにおいて、「必須項目です」のエラーメッセージを表示させたいです。

Question

contact formを自作しているのですが、HTMLとCSSのみで必須項目が未入力の際にエラーメッセージとして、以下の画像の
ように「必須項目です入力してください」を表示させたいのですが、その方法が分かりません。

【解決の為に試したこと】
①、該当のinputタグに対して「required」をつける
②、divタグで表示したいエラーメッセージを作成し、以下をcssにて実装

.p-contact__error {
    display: none;
    font-size: 1.3rem
    color: red;
}

input:invalid + .p-error {
    display: block;
}

③、input[type=“text”]を追加

.p-contact__error {
    display: none;
    font-size: 1.3rem
    color: red;
}

input[type=“text”]:invalid + .p-error {
    display: block;
}

④、上記のコード内にて、「:invalid」を「:required」に変更

以上です。

以下は該当箇所のHTMLとCSSファイルです。
よろしくお願い致します！

<section>
        <div class="p-news__titleArea" data-en="CONTACT">
            <form action="#" class="p-contact__form">
              <dl class="p-contact__area">
                <div class="p-contact__control">
                  <dt>
                    <label class="p-contact__label--required" for="your-name">お名前</label>
                  </dt>
                  <dd>
                    <input id="your-name" class="p-contact__input" type="text" name="your-name" value="" placeholder="" required>
                  </dd>
                  <div class="p-contact__error">必須項目です入力してください</div>
                </div>
              </dl>
              <div class="p-contact__btn">
                <button id="" class="p-contact__submit" type="submit">確認画面へ</button>
              </div>
            </form>
        </div>
      </section>

.p-contact__error {
    display: none;
    font-size: 1.3rem;
    color: #dd3f1d;
  }

  input[type="text"]:required + .p-contact__error  {
    display: block;
  }

  input:invalid:focus {
    border: solid 1px #dd3f1d;
    outline: 0;
  }

Answer 1

+ .p-error を + .p-contact__error になおして、

                  <dd>
                    <input id="your-name" class="p-contact__input" type="text" name="your-name" value="" placeholder="" required>
                  </dd>
                  <div class="p-contact__error">必須項目です入力してください</div>

これを

                  <dd>
                    <input id="your-name" class="p-contact__input" type="text" name="your-name" value="" placeholder="" required>
                    <div class="p-contact__error">必須項目です入力してください</div>
                  </dd>

こうすると期待する動作になると思います。

https://developer.mozilla.org/ja/docs/Web/CSS/Adjacent_sibling_combinator

隣接兄弟結合子 (adjacent sibling combinator, +) は 2 つのセレクターを接続し、 2 つ目の要素が 1 つ目の要素の 直後 にあって、両者が同じ親要素の子同士である場合に一致します。

Comments

[soldier]

ご回答ありがとうございます！
また、自身の単純なクラス名のスペルミスも失礼致しました。
確かに表示されました。ありがとうございます！

ただ、この表示を未入力の場合にのみ表示させたいのですが、何か方法はございますでしょうか？
現状では入力をしても未入力の状態であっても常に表示が出ておりまして、、
ちなみに、jsは使用せずにHTMLとCSSのみで制御する形となります。

[int32_t]

<input> に required 属性が付いていて CSS セレクタが「input:invalid + ...」なら未入力の場合のみ表示になると思います。

[soldier]

出来ました！
ありがとうございます。
大変助かりましたm(_ _)m