【ContactForm7】radioの選択で非表示にした項目の必須を無効にしたい

Question

###やりたいこと
javascriptは拾ってきたソースを分かる範囲で改変して使用する程度の素人です。
radioで一方を選択した場合、javascriptで項目を隠し、必須である項目を無効化にしたい。（必須のまま隠すので入力漏れとなり送信完了出来ない）
何かしらヒントでもいただければと思いますので、よろしくお願いいたします。
###ソース

<script type="text/javascript">
    function entryForm(){
        radio = document.getElementsByName('entrySecond')
        if(radio[0].checked) {
            document.getElementById('corporation01').style.display = "";
            document.getElementById('corporation02').style.display = "";
            document.getElementById('corporation03').style.display = "";
            document.getElementById('cnver1').setAttribute("aria-required", true);//必須を外そうとした名残
            document.getElementById('cnver2').setAttribute("aria-required", true);//必須を外そうとした名残
        }else if(radio[1].checked) {
            document.getElementById('corporation01').style.display = "none";
            document.getElementById('corporation02').style.display = "none";
            document.getElementById('corporation03').style.display = "none";
            document.getElementById('cnver1').setAttribute("aria-required", false);//必須を外そうとした名残
            document.getElementById('cnver2').setAttribute("aria-required", false);//必須を外そうとした名残
        }else{
            document.getElementById('corporation01').style.display = "none";
            document.getElementById('corporation02').style.display = "none";
            document.getElementById('corporation03').style.display = "none";
            document.getElementById('cnver1').setAttribute("aria-required", false);//必須を外そうとした名残
            document.getElementById('cnver2').setAttribute("aria-required", false);//必須を外そうとした名残
        }
    }
    //オンロードさせ、リロード時に選択を保持
    window.onload = entryForm;
</script>

<div>
    <table>
        <tr>
            <th><span class="type01">必須</span>法人／個人</th>
            <td>[radio entrySecond use_label_element "法人" "個人"]</td>
        </tr>
    </table>
    <table>
        <tr id="corporation01">
            <th><span class="type01">必須</span>貴社名</th>
            <td>[text* office_name id:cnver1]</td>
        </tr>
        <tr id="corporation02">
            <th><span class="type01">必須</span>貴社名（ふりがな）</th>
            <td>[text* office_s_name id:cnver2]</td>
        </tr>
        <tr id="corporation03">
            <th><span class="type02">任意</span>部署名</th>
            <td>[text department]</td>
        </tr>
        <tr>
            <th><span class="type01">必須</span>お名前</th>
            <td>[text* user_name]</td>
        </tr>
        <tr>
            <th><span class="type01">必須</span>お名前（ふりがな）</th>
            <td>[text* user_s_name]</td>
        </tr>
        <tr>
            <th><span class="type02">任意</span>郵便番号</th>
            <td>[text zip]</td>
        </tr>
        <tr>
            <th><span class="type02">任意</span>ご住所</th>
            <td>[text address]</td>
        </tr>
        <tr>
            <th><span class="type02">任意</span>電話番号</th>
            <td>[tel tel_number]</td>
        </tr>
        <tr>
            <th><span class="type02">任意</span>FAX番号</th>
            <td>[tel fax_number]</td>
        </tr>
        <tr>
            <th><span class="type01">必須</span>メールアドレス</th>
            <td>[email* email]</td>
        </tr>
        <tr>
            <th><span class="type01">必須</span>メールアドレス（再入力）</th>
            <td>[email* email_confirm]</td>
        </tr>
    </table>
</div>

###現在の状態
参考サイトを色々とめぐり、ContactForm7にonclickを追加したり、上記のjavascriptを追記でラジオで選んだアクションに対し、表示・非表示させる事までは出来ました。
しかし、隠した項目に必須項目があり見た目上見えないだけで、入力のバリデーションチェックが入りエラーとなって、送信が一向に完了しませんでした。

条件にsetAttribute("aria-required", false);などと追記してみたものの効果がありませんでした。

最悪隠す項目は必須を外す予定です。
プラグイン内部を改変せず、function.phpに追記ぐらいまでで実現が可能な方法があればご教示いただけますよう、よろしくお願いします。

###その後の進捗
ヒントを頂いて、無事意図した動きを実現できました。
その完成ソースです。

<script type="text/javascript">
function entryForm() {
    radio = document.getElementsByName('entrySecond');
    var textValue_F = document.getElementById('cnver1');
    var textValue_S = document.getElementById('cnver2');
    if (radio[0].checked) {
        document.getElementById('corporation01').style.display = "";
        document.getElementById('corporation02').style.display = "";
        document.getElementById('corporation03').style.display = "";
        //ダミー文字をリセット
        textValue_F.value = '';
        textValue_S.value = '';
    } else if (radio[1].checked) {
        document.getElementById('corporation01').style.display = "none";
        document.getElementById('corporation02').style.display = "none";
        document.getElementById('corporation03').style.display = "none";
        textValue_F.value = 'ダミー文字';
        textValue_S.value = 'ダミー文字';
    } else {
        document.getElementById('corporation01').style.display = "none";
        document.getElementById('corporation02').style.display = "none";
        document.getElementById('corporation03').style.display = "none";
        textValue_F.value = 'ダミー文字';
        textValue_S.value = 'ダミー文字';
    }
}
//オンロードさせ、リロード時に選択を保持
window.onload = entryForm;
</script>

Answer 1

送信ボタンを2つ作ればOKです。
法人を選択したときに押すボタン、
個人を選択したときに押すボタンって感じですね。
できそうですか？

Comments

[seiji_maemura]

ご回答いただきまして、ありがとうございます。
なるほど、法人/個人の入力項目をボタン丸ごと2個並べてどちらかを表示すると言う事ですね。ContactForm7でのやり方のヒント、または参考サイト等ありましたらお教え願えませんでしょうか。
よろしくお願いします。

ContactForm7のソースを追記しました。

Answer 2

ContactForm7 のソースコードを見てみたところ、バリデーションをPHPでやっているようですので、以下のような方法があるかと思います。
0. test.phpを書き換える。
0. ContactForm7 のタグから必須を外して、javascriptでのバリデーションを独自実装する。
0. 非表示の必須フォームにダミー文字列を食わせる。

簡単そうなのは3で、ダミーには全角空白を使うといいかと思います。

Comments

[seiji_maemura]

ご回答いただきまして、ありがとうございます。
③が何となくイメージがわきました！
ググった感じだと（http://mrorm.jpn.org/memolog/javascript/entry1077.html）このサイトのような事でしょうか？

[Lhankor_Mhy]

そうですね、こんな感じです。PHPのソースを見る限りホワイトスペース文字は未入力と判定するようなので、ダミー文字列は半角ではなくて全角空白をおすすめします。

[seiji_maemura]

ありがとうございます！
既存のifにダミーを入れるif部分の移植な感じでしょうか。
頑張ってみます。ありがとうございました。