バリデート付きの条件分岐フォーム作成

2018.11.13

mw wpformで条件分岐フォームでありながら、それぞれのフォームにバリデーションを付与する方法です。

以下では選んだラジオボタンによって、
切り替えるフォームを作成する方法です。

funnction.phpに以下の記述をします。

/* mw wp form validate */
function my_validation_rule( $Validation, $data ) {

  if ( $data['投稿'] === '画像' ) {
      $Validation->set_rule( '画像', 'noEmpty', array(
        'message' => '画像が添付されていません'
      ) );
  }
	if ( $data['投稿'] === 'テキスト' ) {
      $Validation->set_rule( 'テキスト', 'noEmpty', array(
        'message' => 'テキストをご記入下さい。'
      ) );
  }
  return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-1582', 'my_validation_rule', 10, 2 );

/* mw wp form validate */

function my_validation_rule( $Validation, $data ) {

if ( $data['投稿'] === '画像' ) {

$Validation->set_rule( '画像', 'noEmpty', array(

'message' => '画像が添付されていません'

) );

}

if ( $data['投稿'] === 'テキスト' ) {

$Validation->set_rule( 'テキスト', 'noEmpty', array(

'message' => 'テキストをご記入下さい。'

) );

}

return $Validation;

}

add_filter( 'mwform_validation_mw-wp-form-1582', 'my_validation_rule', 10, 2 );

$data[‘投稿’] にあたる部分がラジオボタンのname属性にあたる部分です。
あとはset_ruleにバリデートを付与したいフォームエリアのname属性を指定してあげればOKです。

■  投稿をを選択
[mwform_radio name="投稿" children="画像,テキスト]

■画像を添付してください
[mwform_file name="画像"]

■テキストを記入してください
[mwform_text name="テキスト"]

■送信ボタン
[mwform_submitButton name="mwform_submitButton-982" confirm_value="確認画面へ" submit_value="送信する"]

■ 投稿をを選択

[mwform_radio name="投稿" children="画像,テキスト]

■画像を添付してください

[mwform_file name="画像"]

■テキストを記入してください

[mwform_text name="テキスト"]

■送信ボタン

[mwform_submitButton name="mwform_submitButton-982" confirm_value="確認画面へ" submit_value="送信する"]

あとはスクリプトでname=”投稿”のvalの値によって表示非表示の条件分岐をしてあげれば、
選んだ選択肢によって表示非表示を切り替えられるマルチフォームを作成することができます。

<script>
$(function() {
 $('[name="投稿"]:radio').change(function() {
  
  if ($("input:radio[name='投稿']:checked").val() == "画像") {
   $('.kaiga').show();
   $('.haiku').hide();
  } else if($("input:radio[name='投稿']:checked").val() == "テキスト") {
   $('.haiku').show();
   $('.kaiga').hide();
  }
 }).trigger('change'); 
});
</script>