StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I'm not familiar enough with MVC to answer about how to use built-in validation (like plain-old ASP.Net has), assuming that MVC has it to begin with.</p> <p>That little disclaimer out of the way, the code below should validate your form for required fields and throw a message on the page for your users:</p> <pre><code>$(function () { var Validate = function Validate(e) { var allFieldsValid = false, // boolean flag to cache result invalidFields = [], // array for selectors validFields = [], // array for selectors requiredFields = [ // array of selectors to validate against "#Code", "#Description", "#Status" ], message = $('<span />').addClass('validation-message').text('* This is a required field.'); $(requiredFields.join(', ')).each(function (i, elem) { //requiredFields.join(', ') should return "#Code, #Description, #Status" var field = $(elem) value = field.val(); if (value.length === 0) { invalidFields.push(field.selector); } else { validFields.push(field.selector); } }); allFieldsValid = invalidFields.length === 0; // if there are no invalid fields, all fields must be valid $('span.validation-message').remove(); // remove any previous validation messages $(validFields.join(', ')).removeClass("highlighted"); // remove class from all valid fields // add class to all invalid fields and append message $(invalidFields.join(', ')).addClass("highlighted").append(message.clone()); if (!allFieldsValid) { e.preventDefault(); // invalid fields, prevent event from bubbling } return allFieldsValid; // return result }; $("#Save").click(Validate); }); </code></pre> <p>As far as your other questions about validation:</p> <ol> <li>What is the best way of doing validations? Client side vs server side?</li> <li>also, is it better to display a pop-up validation message or a highlighted message embedded on webpage?</li> </ol> <p>In order:</p> <ol> <li><p><strong>There is no versus</strong>. There is either server-side, or both client-side and server-side. This is because you cannot rely on your users to have JavaScript enabled and therefore you cannot rely on your client-side to run. Think of client-side like a pre-filter. The purpose of client-side is to do a "precheck" and prevent unwanted data from using up bandwidth (sending to server and the "bad data" response) and from using processing cycles on the server. Client-side will also be more responsive than server-side (because there's no request-response) but that's really only a perceived performance issue for high-latency connections. <strong>Server-side will always run and so validation should always start on the server.</strong></p></li> <li><p>This is matter of preference for your users. Personally, I wouldn't code a pop-up unless someone asked me very nicely to do so, mostly because it takes focus away from the form and requires extra work (usually one click) to dismiss. A highlighted message does not have to do either of these, and some validation routines are even nice enough to put focus on the first invalid field. If there's room on the page for it, a message next to each field is handy and can look very nice. If however, space on the page is at a premium, most validation routines will put an asterisk next to the field and have all of the individual validation messages in one spot on the page.</p></li> </ol>

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