

cake

[code]

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

以下html

[code]

    <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>
    
[/code]

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

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

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

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


CC BY-SA 4.0
2021-02-24T08:20:14.680
74245
2021-03-02T08:52:15.290
2021-02-24T08:55:07.440
3060
41150
question
javascript php html css cakephp
form->error のclsssを複数指定は可能か


[FormHelper::input()](https://book.cakephp.org/2/ja/core-
libraries/helpers/form.html#automagic-form-elements) を使用しましょう。

[code]

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

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

[code]

    <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>
    
[/code]

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

[code]

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

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

参考: [フォーム要素の生成 - FormHelper - 2.x](https://book.cakephp.org/2/ja/core-
libraries/helpers/form.html#automagic-form-elements)


CC BY-SA 4.0
2021-03-02T08:52:15.290
74360
2021-03-02T08:52:15.290
2668
74245
answer