Question

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

HTML表单：

workPhone_p

jQuery验证：

<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>

（$("#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 } } });是一种自定义方法，用于验证电话号码，http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js中定义了phone

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

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

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")。

我们只是将无线电选择器参数化为通用。

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

1 个答案: