Databases
StackOverflow2013
Postsdbo
POjQuery Validate require_from_group - How to implement two groups, with only one being ultimately required?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Validate require_from_group - How to implement two groups, with only one being ultimately required?
    text
    copied!<p>I have a form where a user is supposed to be able to search for data by entering EITHER an address (in individual street, city, country, state fields) OR one of 4 particular codes the company uses internally to describe the data.</p> <p>I've assigned the address fields one class name (per the Validate rule) and the special codes fields another.</p> <p>My problem is that I can't figure out how to NOT require one or the other of those two groups if the <em>other</em> group's fields are all filled in. IE - if the user completes all the address fields, he should not be required to fill in any of the special codes text boxes and conversely if the user populates one of the special codes, she should not be required to fill in address values.</p> <p>I'm using C# and jQuery Validate 1.11 - with a fix to the original require_from_group function which resolved a reported issue of skipping all validations after an initial group validation (or something like that).</p> <p>Here is the code on the form showing the fields in question:</p> <pre><code>&lt;div class="evenFormPaddedWide mb" style="max-width:575px;"&gt; &lt;label&gt;Address&lt;/label&gt;&lt;br /&gt; &lt;div class="pDiv"&gt; &lt;div class="elementDiv"&gt; &lt;label&gt;Street&lt;/label&gt;&lt;br /&gt; &lt;asp:TextBox id="txtAddress" runat="server" Width="250px" MaxLength="65" CssClass="GroupAddress"&gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;div class="elementDiv"&gt; &lt;label&gt;City&lt;/label&gt;&lt;br /&gt; &lt;asp:TextBox id="txtCity" runat="server" Width="120px" MaxLength="60" CssClass="GroupAddress"&gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="pDiv"&gt; &lt;div class="elementDiv"&gt; &lt;label&gt;Country&lt;/label&gt;&lt;br /&gt; &lt;asp:DropDownList ID="ddlCountries" CssClass="GroupAddress" runat="server" DataValueField="CountryCode" DataTextField="CountryName" AutoPostBack="true" OnSelectedIndexChanged="ddlCountries_SelectedIndexChanged"&gt;&lt;/asp:DropDownList&gt; &lt;/div&gt; &lt;div class="elementDiv"&gt; &lt;asp:UpdatePanel ID="pnlStates" runat="server"&gt; &lt;Triggers&gt; &lt;asp:AsyncPostBackTrigger ControlID="ddlCountries" EventName="SelectedIndexChanged"/&gt; &lt;/Triggers&gt; &lt;ContentTemplate&gt; &lt;label&gt;State&lt;/label&gt;&lt;br /&gt; &lt;asp:DropDownList ID="ddlStates" CssClass="GroupAddress" runat="server" DataValueField="GeopoliticalCode" DataTextField="GeopoliticalName"&gt;&lt;/asp:DropDownList&gt; &lt;/ContentTemplate&gt; &lt;/asp:UpdatePanel&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="formLine"&gt;&lt;/div&gt; &lt;div class="pDiv"&gt; &lt;div class="elementDiv"&gt; &lt;label&gt;CLLI Code&lt;/label&gt;&lt;br /&gt; &lt;asp:TextBox id="txtClliCode" runat="server" Width="100px" MaxLength="11" CssClass="GroupIDCodes"&gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;div class="elementDiv"&gt; &lt;label&gt;Site Code&lt;/label&gt;&lt;br /&gt; &lt;asp:TextBox id="txtSiteCode" runat="server" Width="100px" MaxLength="8" CssClass="GroupIDCodes"&gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;div class="elementDiv"&gt; &lt;label&gt;F&amp;E Location Code&lt;/label&gt;&lt;br /&gt; &lt;asp:TextBox ID="txtLocationCode" runat="server" MaxLength="10" Columns="12" CssClass="GroupIDCodes"&gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;div class="elementDiv"&gt; &lt;label&gt;MUX Code&lt;/label&gt;&lt;br /&gt; &lt;asp:TextBox id="txtMuxCode" runat="server" Width="50px" MaxLength="3" CssClass="GroupIDCodes"&gt;&lt;/asp:TextBox&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="formLine"&gt;&lt;/div&gt; &lt;div class="fr"&gt; &lt;asp:Button id="btnSubmit" runat="server" Text="Search" onclick="btnSubmit_Click"&gt;&lt;/asp:Button&gt; &lt;asp:Button id="btnClear" runat="server" Text="Clear" onclick="btnClear_Click" CausesValidation="False" CssClass="cancel"&gt;&lt;/asp:Button&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And here is how I'm utilizing the require_from_group2 function:</p> <pre><code>$(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" }); }); </code></pre> <p>And just in case, here's the fixed require_from_group:</p> <pre><code>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 &gt;= 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.")); </code></pre> <p>Any help is certainly appreciated!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload