0

我有一个表单，用户应该能够通过输入地址（在个别街道、城市、国家、州字段中）或公司内部用于描述数据的 4 个特定代码之一来搜索数据。

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

我的问题是，如果另一个组的字段都已填写，我无法弄清楚如何不需要这两个组中的一个或另一个。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."));

任何帮助当然不胜感激！

4

1 回答 1

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/

于 2013-10-11T16:43:06.063 回答