jQuery Validate require_from_group-如何实现两组，最终只需要一组？

Question

我有一个表格，假设用户可以通过输入地址（在各个街道，城市，国家，州字段中）或公司内部用于描述数据的4种特定代码之一来搜索数据。

我已经为地址字段分配了一个类名（根据Validate规则），而特殊代码字段则分配了另一个类名。

我的问题是，如果另一组的字段都已填写，我不知道如何不要求这两个组中的一个或另一个。IE-如果用户填写了所有地址字段，则不应该要求他填写在任何特殊代码文本框中，相反，如果用户填充其中一个特殊代码，则不要求她填写地址值。

我正在使用C＃和jQuery Validate 1.11-修复了原始的require_from_group函数，该函数解决了报告的在初始组验证（或类似的验证）之后跳过所有验证的问题。

这是表单上显示相关字段的代码：

<div class="evenFormPaddedWide mb" style="max-width:575px;">
    <label>Address</label><br />
    <div class="pDiv">
        <div class="elementDiv">
            <label>Street</label><br />
            <asp:TextBox id="txtAddress" runat="server" Width="250px" MaxLength="65" CssClass="GroupAddress"></asp:TextBox>
        </div>
        <div class="elementDiv">
            <label>City</label><br />
            <asp:TextBox id="txtCity" runat="server" Width="120px" MaxLength="60" CssClass="GroupAddress"></asp:TextBox>
        </div>
    </div>
    <div class="pDiv">
        <div class="elementDiv">
            <label>Country</label><br />
            <asp:DropDownList ID="ddlCountries" CssClass="GroupAddress" runat="server" DataValueField="CountryCode" DataTextField="CountryName" AutoPostBack="true" OnSelectedIndexChanged="ddlCountries_SelectedIndexChanged"></asp:DropDownList>
        </div>
        <div class="elementDiv">
            <asp:UpdatePanel ID="pnlStates" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="ddlCountries" EventName="SelectedIndexChanged"/>
                </Triggers>
                <ContentTemplate>
                        <label>State</label><br />
                        <asp:DropDownList ID="ddlStates" CssClass="GroupAddress" runat="server" DataValueField="GeopoliticalCode" DataTextField="GeopoliticalName"></asp:DropDownList>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
    <div class="formLine"></div>
    <div class="pDiv">
        <div class="elementDiv">
            <label>CLLI Code</label><br />
            <asp:TextBox id="txtClliCode" runat="server" Width="100px" MaxLength="11" CssClass="GroupIDCodes"></asp:TextBox>
        </div>
        <div class="elementDiv">
            <label>Site Code</label><br />
            <asp:TextBox id="txtSiteCode" runat="server" Width="100px" MaxLength="8" CssClass="GroupIDCodes"></asp:TextBox>
        </div>
        <div class="elementDiv">
            <label>F&E Location Code</label><br />
            <asp:TextBox ID="txtLocationCode" runat="server" MaxLength="10" Columns="12" CssClass="GroupIDCodes"></asp:TextBox>
        </div>
        <div class="elementDiv">
            <label>MUX Code</label><br />
            <asp:TextBox id="txtMuxCode" runat="server" Width="50px" MaxLength="3" CssClass="GroupIDCodes"></asp:TextBox>
        </div>
    </div>
    <div class="formLine"></div>
    <div class="fr">
        <asp:Button id="btnSubmit" runat="server" Text="Search"     onclick="btnSubmit_Click"></asp:Button>
        <asp:Button id="btnClear" runat="server" Text="Clear" onclick="btnClear_Click" CausesValidation="False" CssClass="cancel"></asp:Button>
    </div>
</div>

这是我如何利用require_from_group2函数：

$(function () {
    jQuery.validator.messages.required = "";

    $('#userInputForm').validate({
        rules: {
            txtAddress: {
                minlength: 6,
                require_from_group2: [4, ".GroupAddress"]
            },
            txtCity: { require_from_group2: [4, ".GroupAddress"] },
            ddlCountries: { require_from_group2: [4, ".GroupAddress"] },
            ddlStates: { require_from_group2: [4, ".GroupAddress"] },
            txtClliCode: { require_from_group2: [1, ".GroupIDCodes"] },
            txtSiteCode: { require_from_group2: [1, ".GroupIDCodes"] },
            txtLocationCode: { require_from_group2: [1, ".GroupIDCodes"] },
            txtMuxCode: { require_from_group2: [1, ".GroupIDCodes"] }
        },
        //End rules
        groups: {
            Address: "txtAddress txtCity ddlCountries ddlStates",
            OtherCodes: "txtClliCode txtSiteCode txtLocationCode txtMuxCode"
        },
        //End groups
        messages: {
            txtAddress: { minlength: "Street requires at least 6 characters", require_from_group2: "All address fields are required when searching by address" },
            txtCity: { require_from_group2: "All address fields are required when searching by address" },
            ddlCountries: { require_from_group2: "All address fields are required when searching by address" },
            ddlStates: { require_from_group2: "All address fields are required when searching by address" },
            txtClliCode: { require_from_group2: "At least one of the bottom 4 code fields must be provided if not searching by address" },
            txtSiteCode: { require_from_group2: "At least one of the bottom 4 code fields must be provided if not searching by address" },
            txtLocationCode: { require_from_group2: "At least one of the bottom 4 code fields must be provided if not searching by address" },
            txtMuxCode: { require_from_group2: "At least one of the bottom 4 code fields must be provided if not searching by address" }
        },
        //End messages
        errorLabelContainer: "#errorMessageDetailContainerLeft"
    });
});

以防万一，这是固定的require_from_group：

jQuery.validator.addMethod("require_from_group2", function (value, element, options) {
    var validator = this;
    var minRequired = options[0];
    var selector = options[1];
    var validOrNot = jQuery(selector, element.form).filter(function () {
        return validator.elementValue(this);
    }).length >= minRequired;

    // remove all events in namespace upload

    jQuery(selector, element.form).off('.require_from_group2');

    if (this.settings.onkeyup) {
        jQuery(selector, element.form).on({
            'keyup.require_from_group2': function (e) {
                jQuery(selector, element.form).valid();
            }
        });
    }
    if (this.settings.onfocusin) {
        jQuery(selector, element.form).on({
            'focusin.require_from_group2': function (e) {
                jQuery(selector, element.form).valid();
            }
        });
    }
    if (this.settings.click) {
        jQuery(selector, element.form).on({
            'click.require_from_group2': function (e) {
                jQuery(selector, element.form).valid();
            }
        });
    }
    if (this.settings.focusout) {
        jQuery(selector, element.form).on({
            'focusout.require_from_group2': function (e) {
                jQuery(selector, element.form).valid();
            }
        });
    }

    return validOrNot;
}, jQuery.format("Please fill at least {0} of these fields."));

任何帮助，我们都感激不尽！

Answer 1

您的代码过于复杂，我不确定require_from_group是否适合您要执行的操作。 这只是应该使元素的任何具体数量从一组所需的元素。 换句话说，如果您的组中有六个项目并且您将“ 2”指定为参数，那么仅当您填写了六个组中的任何两个字段时 ，才能满足此方法/规则。

在您的情况下，您希望填充一组中的所有内容，而不是填充另一组中的所有内容，这完全是另外一回事。

使用jQuery Validate，您不能动态地打开/关闭验证。 定义和初始化后，它将保持“打开”状态。 但是，您可以随时使用.rules()方法动态覆盖，添加或删除任何字段上的任何规则。

我可以通过单击单选框或复选框来使用户实际选择一个组或另一个组。 这也将减少用户期望填写的内容的混乱。但是，如果您不喜欢该想法，则可以在任何字段上使用blur ， change或另一个事件来触发类似的“规则更改”代码。

然后，基于事件，您可以相应地修改规则。

$('input[name="radio"]:radio').on('change', function () {  // on selection event
    if ($('#one').is(':checked')) {            // if first radio is selected
        $('.inputGroup1 ').each(function () {  // add rules to first group
            $(this).rules('add', {
                required: true
            });
        });
        $('.inputGroup2').each(function () {  // remove rules from second group
            $(this).rules('remove');
        });
    } else {                                  // if second radio is selected
        $('.inputGroup2').each(function () {  // add rules to second group
            $(this).rules('add', {
                required: true
            });
        });
        $('.inputGroup1').each(function () {  // remove rules from first group
            $(this).rules('remove');
        });
    };
});

概念验证： http ： //jsfiddle.net/tF8Wp/