Question

我在使用jQuery validate插件时遇到了一些麻烦。

我有一个带有一些名称数组复选框和相应名称数组无线电输入的表单。

我之后的目的是仅在检查（不需要）check []输入时验证动作[]输入。

$(document).ready(function(){
    $("#testForm").validate({
        rules: {
            'action[]': {
                required: function () {
                    return $("'check[]':checked");
                }
            }
        }
    });
});

<form id="testForm" name="testForm" method="post" action="" >
    <table cellpadding="1" cellspacing="1" border="1">
        <tr>
            <th>&nbsp;</th>
            <th>Include</th>
            <th>Action</th>
        </tr>
        <tr>
            <th>Row[0]:</th>
            <td><input type="checkbox" name="check[0]" value="Y" /></td>
            <td>
                <input type="radio" name="action[0]" class="required" value="ON" />ON<br/>
                <input type="radio" name="action[0]" class="required" value="OFF" />OFF<br/>
                <label class="error" for="action[0]" generated="true"></label>
            </td>
        </tr>
        <tr>
            <th>Row[1]:</th>
            <td><input type="checkbox" name="check[1]" value="Y" /></td>
            <td>
                <input type="radio" name="action[1]" class="required" value="ON" />ON<br/>
                <input type="radio" name="action[1]" class="required" value="OFF" />OFF<br/>
                <label class="error" for="action[1]" generated="true"></label>
            </td>
        </tr>
        <tr>
            <td colspan="3"><input type="submit" value="Submit Form" /></td>
        </tr>
    </table>
</form>

我已经设置了一个jsfiddle来希望更详细地解释这个问题：

http://jsfiddle.net/h2dt4t30/2/

任何帮助或指导都将不胜感激。

提前致谢

Answer 1

您可以尝试类似

的内容

jQuery.validator.addClassRules("action-required", {
  required: function(el){
    return $(el).closest('tr').find('input[name^="check"]').is(':checked')
  }
});

$("#testForm").validate({});

//since snippet doesn't allow form submit
$(':button').click(function(){
  console.log($("#testForm").valid())
})

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>

<form id="testForm" name="testForm" method="post" action="" >
    <table cellpadding="1" cellspacing="1" border="1">
        <tr>
            <th>&nbsp;</th>
            <th>Include</th>
            <th>Action</th>
        </tr>
        <tr>
            <th>Row[0]:</th>
            <td><input type="checkbox" name="check[0]" value="Y" /></td>
            <td>
                <input type="radio" name="action[0]" class="action-required" value="ON" />ON<br/>
                <input type="radio" name="action[0]" class="action-required" value="OFF" />OFF<br/>
                <label class="error" for="action[0]" generated="true"></label>
            </td>
        </tr>
        <tr>
            <th>Row[1]:</th>
            <td><input type="checkbox" name="check[1]" value="Y" /></td>
            <td>
                <input type="radio" name="action[1]" class="action-required" value="ON" />ON<br/>
                <input type="radio" name="action[1]" class="action-required" value="OFF" />OFF<br/>
                <label class="error" for="action[1]" generated="true"></label>
            </td>
        </tr>
        <tr>
            <td colspan="3"><input type="button" value="Submit Form" /></td>
        </tr>
    </table>
</form>

Answer 2

jsfiddle目前似乎对我不利，所以我会在他回到网上后立即更新答案

验证插件提供depends选项。

请尝试这样：

$("#testForm").validate({
    rules: {
        'action[]': {
            depends: function () {
                return $("check[]").is(":checked"); //here you need to target the needed checkbox, not all of them
            }
        }
    }
});

jQuery验证名称数组，必需名称数组

2 个答案: