0

cake

$this->Form->error('Test.id', null, ['wrap' => 'p', 'class' => 'error-message']);

以下html

<div>
<div>
<p>
<input type="text" name="data[test][id]" id="test_id" class="test_class" required="required">
</p>
</div>
<p class="error-message">エラーです。</p>
<div>

現在、バリデーションに引っかかった時にerror-messageを出力するようにしています。
しかし、inputの入力欄自体の背景色も変えたいと思っています。

validとinvalidをcssでinputへ付与してもよいですが、
それだとエラーメッセージが呼び出される前に(ページを読み込んだ直後に)背景色が変わってしまいます。
今回はerror-messageを呼び出した時に、inpuの[textの入力欄背景色も変えるやり方にしみてみたいです。

このやり方は実装可能ですか?

代替案?
=:activeはクリックしている間ですが、クリックしたら変わるという仕様でも問題ありません。そのようなことは可能ですか?調べましたがやはりcssだけでは厳しいように思えました。

2
  • CakePHPのバージョンを記載してください。やりたいことは、バリデーションエラー時にinput要素へ任意のクラスを指定したいということでよいでしょうか?
    – nojimage
    Commented 2021年2月26日 12:41
  • はい、その通りです。申し訳ありません。既に設定しているのは下に出る文言で、この度はinpu自体の背景色も同時に変えたいです。cakephp2.9.9です。
    – jjman
    Commented 2021年3月1日 5:31

1 件の回答 1

1

FormHelper::input() を使用しましょう。

<?php
echo $this->Form->input('User.name');
?>

で、以下のような出力結果が得られます。

<div class="input text">
    <label for="UserName">Name</label>
    <input name="data[User][name]" type="text" value="" id="UserName" />
</div>

<!-- バリデーションエラーがある場合 -->
<div class="input text error">
    <label for="UserName">Name</label>
    <input name="data[User][name]" type="text" value="" id="UserName" />
    <div class="error-message">Some error message.</div>
</div>

input要素をdivで囲んだHTML出力が得られます。エラーがある場合は、divにerrorクラスが付与されるので、CSSで

.error input[type=text] {
  background-color: #fcc;
}

などとすればinput要素に背景色を付与できます。

参考: フォーム要素の生成 - FormHelper - 2.x

4
  • >nojimage様 早速のご回答ありがとうございます。後程確認させていただきます。拙い説明なのにいつもご丁寧にありがとうございます。
    – jjman
    Commented 2021年3月2日 9:25
  • >input要素をdivで囲んだHTML出力が得られます。エラーがある場合は、divにerrorクラスが付与されるので   ここがいまいちよくわかりません。今はバリデーションに引っかかった時form->errorが呼び出されるようになっていますが、<div class="input text error">こちらと下部のcssを追加しただけで自動でinputも動くようになるんですか?
    – jjman
    Commented 2021年3月2日 9:36
  • FormHelper::input()を使用すればエラー表示も行いますので、FormHelper::error()の呼び出しは不要です。
    – nojimage
    Commented 2021年3月4日 11:18
  • FormHelper::input()を使用してそのレンダリング結果を見れば私の言っていることがわかるかと思います。実際に手を動かしてください。
    – nojimage
    Commented 2021年3月4日 11:19

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。