StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Rather than having to write page specific code to workaround this issue you could make use of the following library:</p> <p><a href="https://github.com/bbraithwaite/JQueryValidationForWebForms" rel="nofollow">https://github.com/bbraithwaite/JQueryValidationForWebForms</a></p> <p>NB Source code is below but the Github link will always have most recent source.</p> <p>It sits on top of the jQuery Validation Framework and abstracts away this problem by making use of class names as a convention.</p> <p>You register the validation event in the same way as jQuery validation (just with a different name):</p> <pre><code>$(function() { $("#aspForm").validateWebForm(); }); </code></pre> <p><strong>Example .ASPX</strong></p> <p>A basic .aspx example with two validation groups might look as below. You would just wrap each logical section and give it a class name of "form" and on the action that should trigger the validation event just add the class "submit":</p> <pre><code> <fieldset class="form"> <div class="something"> <ul></ul> </div> <legend>Sign Up</legend> <p> <asp:Label ID="uiFirstName" runat="server" AssociatedControlID="uxFirstName" Text="First name:"></asp:Label> <asp:TextBox ID="uxFirstName" runat="server" CssClass="required"></asp:TextBox> </p> <p> <asp:Button ID="uxRegister" runat="server" Text="Sign Up" CssClass="submit signup" /> <asp:Button ID="uxCancelRegister" runat="server" Text="Cancel" /> </p> </fieldset> <fieldset class="form"> <legend>Login</legend> <p> <asp:Label ID="uiUserName" runat="server" AssociatedControlID="uxUserName" Text="User name:"></asp:Label> <asp:TextBox ID="uxUserName" runat="server" CssClass="required email"></asp:TextBox> </p> <p> <asp:Button ID="uxLogin" runat="server" Text="Login" CssClass="submit login" /> <asp:Button ID="uxCancelSignUp" runat="server" Text="Cancel" /> </p> </fieldset> </code></pre> <p><strong>Source Code</strong></p> <pre><code>(function ($) { $.extend($.fn, { validateWebForm: function (options) { var form = $(this[0]), formExists = (form.length) && form.is('form'); if (formExists) { if (!options) { options = {}; } // stop the validation from firing on the form submit options.onsubmit = false; // wire up the default jquery validation event to the form this.validate(options); // Select any input[type=text] elements within a validation group // and attach keydown handlers to all of them. $('.form :text').keydown(function (event) { // Only execute validation if the key pressed was enter. if (event.keyCode == 13) { $(event.currentTarget).closest(".form").find(".submit").click(); } }); // find the submit buttons and override the click event form.getSumbitControls().click(this.validateAndSubmit); return this; } return undefined; }, getSumbitControls: function () { return $(this).find('.form .submit'); }, getValidationContainer: function (submitControl) { return $(submitControl).closest('.form'); }, validateAndSubmit: function (event) { // Ascend from the button that triggered this click event // until we find a container element flagged with // .validationGroup and store a reference to that element. var group = $(this).getValidationContainer(event.currentTarget), isValid = true; // Descending from that .form element, find any input // elements within it, iterate over them, and run validation on // each of them. group.find(':input').each(function (i, item) { if (!$(item).valid()) { isValid = false; } }); // If any fields failed validation, prevent the button's click // event from triggering form submission. if (!isValid) { event.preventDefault(); } } }); })(jQuery); </code></pre> <p><strong>Nuget Users</strong></p> <p>PM> Install-Package JQuery.Validation.WebForms</p> <p>This evolved from reading the following post from Dave Ward:</p> <p><a href="http://encosia.com/asp-net-webforms-validation-groups-with-jquery-validation/" rel="nofollow">http://encosia.com/asp-net-webforms-validation-groups-with-jquery-validation/</a></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