0

我有一个包含 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>

4

1 回答 1

0

使用最优秀的 jQuery 验证插件http://docs.jquery.com/Plugins/Validation，您可以使用“depends”使字段仅在满足其他条件时才需要。

为了确保只填写一组字段，您可以在单击后使其他字段不可见（并以编程方式清空任何值）。我看到的问题是当有人开始单击单选按钮然后决定他们要填写 b 数据时......他们将如何删除 A 中的所有单选按钮？

于 2012-11-21T14:14:49.693 回答