jQuery Validation plugin - 验证一组输入字段，并且至少需要一组

Question

我正在尝试使用 jQuery Validate Plugin 验证我的表单。 我的表单至少需要一对这样的输入（例如：mobilePhone/mobilePhone_p 或/和personalPhone/personalPhone_p 或/和workPhone/workPhone_p） 但我不知道如何将一个文本字段（电话号码）与他的相关单选按钮（首选是/否）链接以验证我的表单并验证至少有一对。 如果设置了一对或多对，我的表单还需要至少一个选中的单选按钮。

HTML 表单：

<form method="post" action="#" id="phoneForm">
    <table>
        <tr>
            <td><label for="mobilePhone">Mobile</label></td>
            <td>
                <input type="text" class="mp_phone" name="mobilePhone" id="mobilePhone" value="" />
            </td>
            <td><label for="mobilePhone_p">Preferred phone number</label> <input type="radio" name="num_p" id="mobilePhone_p" value="mobilePhone_p" /></td>
        </tr>
        <tr>
            <td><label for="personalPhone">Personal</label></td>
            <td>
                <input type="text" class="mp_phone" name="personalPhone" id="personalPhone" value="" />
            </td>
            <td><label for="personalPhone_p">Preferred phone number</label> <input type="radio" name="num_p" id="personalPhone_p" value="personalPhone_p" /></td>
        </tr>
        <tr>
            <td><label for="workPhone">Work</label></td>
            <td>
                <input type="text" class="mp_phone" name="workPhone" id="workPhone" value="" />
            </td>
            <td><label for="workPhone_p">Preferred phone number</label> <input type="radio" name="num_p" id="workPhone_p" value="workPhone_p" /></td>
        </tr>
    </table>
    <button type="submit" id="validateFormButton">Submit</button>
</form>

jQuery 验证：

$("#phoneForm").validate({
    rules: {
        mobilePhone: {
            phone: true,
            require_from_group: [1,".mp_phone"]
        },
        personalPhone: {
            phone: true,
            require_from_group: [1,".mp_phone"]
        },
        workPhone: {
            phone: true,
            require_from_group: [1,".mp_phone"]
        },
        num_p: {
            required: true
        }
    }   
});

（phone 是一种验证电话号码的自定义方法，require_from_group 在http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js 中定义）

当字段需要至少一个文本字段但在其他字段上设置require_from_group 时未验证单选按钮组时有效...

如何使用 jQuery 验证插件验证我的表单？

Answer 1

我通过自定义require_from_group方法找到了解决方案（基于Jquery .validate require_from_group）：

jQuery.validator.addMethod("require_from_group_with_radio", function(value, element, options) {
    var numberRequired = options[0];
    var selector = options[1];
    var fields = jQuery(selector, element.form);
    var filled_fields = fields.filter(function() {
        // check if not empty and radio is checked
        return jQuery(this).val() !== "" && jQuery(this).closest("tr").find("input:radio").is(":checked"); 
    });
    var empty_fields = fields.not(filled_fields);
    // we will mark only first empty field as invalid
    if (filled_fields.length < numberRequired && empty_fields[0] == element) {
        return false;
    }
    return true;
}, jQuery.format("Please fill out at least {0} of these fields and one of this associated option."));

验证：

$("#phoneForm").validate({
    rules: {
        mobilePhone: {
            phone: true,
            require_from_group: [1,".mp_phone"],
            require_from_group_with_radio: [1,".mp_phone"]
        },
        personalPhone: {
            phone: true,
            require_from_group: [1,".mp_phone"],
            require_from_group_with_radio: [1,".mp_phone"]
        },
        workPhone: {
            phone: true,
            require_from_group: [1,".mp_phone"],
            require_from_group_with_radio: [1,".mp_phone"]
        }
    }   
});

只需在过滤条件中添加jQuery(this).closest("tr").find("input:radio").is(":checked")。

我们刚刚将单选选择器参数化为通用的。