javascript - 条件付きフォーム検証

Question

次のように、ユーザーが「はい」または「いいえ」で答えることができる 3 つの質問グループを含む HTML フォームがあります。

A1 A2 A3 A4 A5

また

B1 B2 B3

また

C1 C2 C3 C4 C5 C6

ユーザーは、すべての「A」の質問、すべての「B」の質問、またはすべての「C」の質問に回答することを選択できますが、複数のグループに回答することはできません。また、回答するグループに関係なく、同じグループ内のすべての質問に回答する必要があります (つまり、すべての「A」またはすべての「B」またはすべての「C」の質問 - 質問を未回答のままにすることはできません)。

フォームの HTML は次のとおりです。

    <form method="post" action="process.php" id='editRecord'>

              <table border="1" class="record">
              <tr>
              <td width="88%" valign="top" class="field_name_left">A1</td>
              <td width="12%" valign="top" class="field_data">         
                            <input type="radio" name="CriteriaA1" value="Yes">Yes<input type="radio" name="CriteriaA1" value="No">No</td>
              </tr>
              <tr>
              <td width="88%" valign="top" class="field_name_left">A2</td>
              <td valign="top" class="field_data">
                            <input type="radio" name="CriteriaA2" value="Yes">Yes<input type="radio" name="CriteriaA2" value="No">No</td>
              </tr>
              <tr>
              <td width="88%" valign="top" class="field_name_left">A3</td>
              <td valign="top" class="field_data">                       <input type="radio" name="CriteriaA3" value="Yes">Yes<input type="radio" name="CriteriaA3" value="No">No</td>
              </tr>
              <tr>
              <td width="88%" valign="top" class="field_name_left">A4</td>
              <td valign="top" class="field_data">
                           <input type="radio" name="CriteriaA4" value="Yes">Yes<input type="radio" name="CriteriaA4" value="No">No</td>
              </tr>
              <tr>
              <td width="88%" valign="top" class="field_name_left">A5</td>
              <td valign="top" class="field_data">
                           <input type="radio" name="CriteriaA5" value="Yes">Yes<input type="radio" name="CriteriaA5" value="No">No</td>
              </tr>
              <tr>
                <td valign="top" class="field_name_left" colspan="2">&nbsp;</td>
              </tr>
              <tr>
                <td valign="top" class="field_name_left" colspan="2"><strong>OR</strong></td>
              </tr>
              <tr>
                <td valign="top" class="field_name_left" colspan="2">&nbsp;</td>
              </tr>
              <tr>
                <td valign="top" class="field_name_left">B1</td>
                <td valign="top" class="field_data">
                             <input type="radio" name="CriteriaB1" value="Yes">Yes<input type="radio" name="CriteriaB1" value="No">No</td>
              </tr>
              <tr>
                <td valign="top" class="field_name_left">B2</td>
                <td valign="top" class="field_data">
                             <input type="radio" name="CriteriaB2" value="Yes">Yes<input type="radio" name="CriteriaB2" value="No">No</td>
              </tr>
              <tr>
                <td valign="top" class="field_name_left">B3</td>
                <td valign="top" class="field_data">
                             <input type="radio" name="CriteriaB3" value="Yes">Yes<input type="radio" name="CriteriaB3" value="No">No</td>
            </tr>
            <tr>
                <td valign="top" class="field_name_left" colspan="2">&nbsp;</td>
              </tr>
              <tr>
                <td valign="top" class="field_name_left" colspan="2"><strong>OR</strong></td>
              </tr>
              <tr>
                <td valign="top" class="field_name_left" colspan="2">&nbsp;</td>
              </tr>
              <tr>
              <td width="88%" valign="top" class="field_name_left">C1</td>
              <td width="12%" valign="top" class="field_data">         
                            <input type="radio" name="CriteriaC1" value="Yes">Yes<input type="radio" name="CriteriaC1" value="No">No</td>
              </tr>
              <tr>
              <td width="88%" valign="top" class="field_name_left">C2</td>
              <td valign="top" class="field_data">
                            <input type="radio" name="CriteriaC2" value="Yes">Yes<input type="radio" name="CriteriaC2" value="No">No</td>
              </tr>
              <tr>
              <td width="88%" valign="top" class="field_name_left">C3</td>
              <td valign="top" class="field_data">
                           <input type="radio" name="CriteriaC3" value="Yes">Yes<input type="radio" name="CriteriaC3" value="No">No</td>
              </tr>
              <tr>
              <td width="88%" valign="top" class="field_name_left">C4</td>
              <td valign="top" class="field_data">
                           <input type="radio" name="CriteriaC4" value="Yes">Yes<input type="radio" name="CriteriaC4" value="No">No</td>
              </tr>
              <tr>
              <td width="88%" valign="top" class="field_name_left">C5</td>
              <td valign="top" class="field_data">
                           <input type="radio" name="CriteriaC5" value="Yes">Yes<input type="radio" name="CriteriaC5" value="No">No</td>
              </tr>
              <tr>
              <td width="88%" valign="top" class="field_name_left">C6</td>
              <td valign="top" class="field_data">
                           <input type="radio" name="CriteriaC6" value="Yes">Yes<input type="radio" name="CriteriaC6" value="No">No</td>
              </tr>

              <tr class="submit_btn">
                <td colspan="3">&nbsp;</td>
                </tr>
              <tr class="submit_btn">
                <td colspan="3">
                    <div id="buttons" >
                        <input type="submit" name="-edit" value="Continue">
                        <input type="reset" name="reset" value="Reset">  
                    </div>              
                    <div id="error"></div>            </td>
             </tr>
        </table>
    </form>​

また、次の場所に jsFiddle をセットアップしました。

http://jsfiddle.net/fmdataweb/pEETU/2/

ユーザーが[続行]ボタンをクリックしたときに、あるグループのすべての質問に実際に回答し、別のグループの質問には回答していないことを確認するために、クライアント側の検証を追加したいと思います。

以前は、フォームに A または B オプションしかないときにこの検証を行っていました。現在、フォームには C オプションがあり、Javascript を更新する必要がありますが、これまでに試したことはすべて失敗しました。

元の A および B オプションで機能する Javascript は次のとおりです。

    $(function() {

        $("#editRecord").submit(function(){

        // is anything checked?
        if(!checkEmpty()){
            $("#error").html("Please check something before submitting");
            //alert("nothing Checked");
            return false;
        }
        // Only A _OR_ B
        if(isAorB()){
            $("#error").html("Please complete A or B, not both");
            //alert("please complete A or B, not both");
            return false;
        };
        // all A's or all B's
        if(allAorBChecked()){
            $("#error").html("It appears you have not completed all questions");
            //alert("missing data");
            return false;
        };
        if(haveNo()){
            // we're going on, but sending "type = C"
        }
        //alert("all OK");
            return true;
        });
    });


function checkEmpty(){
    var OK = false;
    $(":radio").each(function(){
        if (this.checked){
            OK = true;
        }
    });
    return OK;
}
 function isAorB(){
    var OK = false;
    var Achecked = false;
    var Bchecked = false;
    $(":radio").each(function(){
        var theChar=this.name.charAt(8);
        // if we have an A checked remember it
         if(theChar == "A" && this.checked && !Achecked){
            Achecked = true;    
        }
        if(Achecked && theChar == "B" && !Bchecked){
            if(this.checked){
                Bchecked = true;
            }
        }
        if (Achecked && Bchecked){
            OK = true;
        }
    });
    return OK;
} 
function allAorBChecked(){
    var notOK = false;
    var Achecked = false;
    $(":radio").each(function(){
        // skip through to see if we're doing A's or B's
    var theChar=this.name.charAt(8);
        // check the A's
     if(theChar == "A" && this.checked && !Achecked){
            Achecked = true;    
        }

    });
    if(Achecked){
        // set the input to A
        $("#type").val("A");
        // check _all_ a's are checked
        var thisName;
        var thisChecked = false;

        $(":radio").each(function(){
            var theChar=this.name.charAt(8);
            var checked = this.checked;
            if (theChar == "A"){
            if (this.name == thisName && !thisChecked){
                // Yes wasn't checked - is No?
                if(!checked){
                    notOK = true;
                }
            }
            thisChecked = checked;
            thisName = this.name;
        }
    });
    }else{
        // set the input to B
        $("#type").val("B");            
        // check _all_ b's are checked
            var thisName;
            var thisChecked = false;
            $(":radio").each(function(){
                var theChar=this.name.charAt(8);
                var checked = this.checked;
                if (theChar == "B"){
                if (this.name == thisName && !thisChecked){
                    // A wasn't checked - is B?
                    if(!checked){
                        notOK = true;
                    }
                }
                thisChecked = checked;
                thisName = this.name;
            }
        });
    }
    return notOK;
}    
function haveNo(){
    var thisName;
    var notOK = false;
        $(":radio").each(function(){
            var checked = this.checked;
            if (this.name == thisName){
                //Is this checked 
                if(checked){
                    notOK = true;
                    $("#type").val("C");            
                }

        }
        thisName = this.name;
    });

    return notOK;
}

</p>

Answer 1

最も優れた jQuery 検証プラグインhttp://docs.jquery.com/Plugins/Validationを使用すると、「依存」を使用して、他の基準が満たされた場合にのみフィールドを必須にすることができます。

1 組のフィールドのみが入力されるようにするには、クリックしたら他のフィールドを非表示にする (そしてプログラムで値を空にする) ことができます。私が目にする問題は、誰かがラジオ ボタンをクリックし始めてから、b データに入力することを決定したときです...どうやって A のすべてのラジオ ボタンを削除するのでしょうか?