（１）条件分岐を追加する。（チェックボックスとラジオボタン）
（２）出力された表示要素を改行する。
（３）チェックボックスON/OFF で要素を開閉する。
「mw wp form validate」条件分岐を追加
「MW WP Form」の問合せフォームで条件を追加する場合、条件分岐の備忘です。チェックボックスとラジオボタンで、処理が微妙に異なります。
プラグインに依存すると、フォームのソースを書かないので「あれ？」ってなります。
functions.php
ルール追加：「その他」選択で「textbox」の入力必須
/* mw wp form validate */
function my_validation_rule( $Validation, $data ) {
if ( isset( $data['趣味']['data'] ) && is_array( $data['趣味']['data'] ) ) {
if ( in_array( 'その他', $data['趣味']['data'] ) ) {
$Validation->set_rule( 'その他', 'noEmpty', array(
'message' => '未入力です。'
) );
}
}
if ( $data['ジャンル'] === 'その他' ) {
$Validation->set_rule( 'その他', 'noEmpty', array(
'message' => '未入力です。'
) );
}
return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-123', 'my_validation_rule', 10, 2 );
取得した要素の全角空白を<br>に置換する
これも「MW WP Form」に関連しての備忘です。
「MW WP Form」からチェックボックスを作成したとき、表示される値に改行<br>が入らないので、全角空白を入れておいて、ループで要素を置換しました。
<script>
var f_text = document.getElementsByClassName('mwform-checkbox-field-text');
//取得した要素の全角空白を<br>に置換する
for(var i=0;i<f_text.length; i++){
f_text[i].innerHTML = f_text[i].innerHTML.replace(' ', '<br> ');
}
</script>
PCはそのまま、一行で表示
指定画面サイズ以下の時は、改行して表示
<script>
var f_text = document.getElementsByClassName('mwform-checkbox-field-text');
var mW = window.innerWidth;
//取得した要素の全角空白を<br>に置換する
if(mW<450){
for(var i=0;i<f_text.length; i++){
f_text[i].innerHTML = f_text[i].innerHTML.replace(' ', '<br> ');
}
}
</script>レスポンシブに追従させるなら、こちらを参照ください。PC／スマホの決め打ちでいいので、ここでは作ってません。
コメント