StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The <strong>most important</strong> thing to look out for when putting all of this together is the little piece of documentation (which isn't really apparent in the documentation for xVal, which abstracts the call to <code>rules("add", options)</code> in the call to <code>xVal.AttachValidator</code>) for <code>rules("add", options)</code> (emphasis mine):</p> <blockquote> <p>Adds the specified rules and returns all rules for the first matched element. <strong>Requires that the parent form is validated, that is, $("form").validate() is called first.</strong></p> </blockquote> <p>This is especially important when the jQuery Form plugin comes into play, and you want to submit the form via AJAX, as you have to set up a <code>submitHandler</code> option in the call to <a href="http://docs.jquery.com/Plugins/Validation/validate#options" rel="nofollow"><code>validate(options)</code></a>, like so:</p> <pre><code><script type="text/javascript"> $(document).ready(function() { // Initialize the form. Store the validator. var validator = $("form").validate({ // Called when the form is valid. submitHandler: function(form) { // Submit the form via ajax. $(form).ajaxSubmit({ // The return data type is json. dataType: "json", // The callback on a successful form // submission. success: function(data, statusText) { // If the new location is not null, then // redirect to that location. if (data.data.newLocation) { // Go to the new location. document.location.href = data.data.newLocation; // Get out. return; } // There are errors, pass them to the validator // for display. validator.showErrors(data.data.errors); } }); } }); }); </script> </code></pre> <p>Because of the documentation quoted above regarding calls to <code>rules("add", options)</code>, <strong>the call to <code>validate(options)</code> must come before the calls to <code>rules("add", options)</code></strong>.</p> <p>If they do not, then the submitHandler is ignored, never called.</p> <p>In the end, this means that your client side code has to look like this when putting it all together:</p> <pre><code><script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script>  <script type="text/javascript" src="xVal.jquery.validate.js"></script>  <script type="text/javascript"> $(document).ready(function() { // Initialize the form. $("form").validate({ // Called when the form is valid. submitHandler: function(form) { // Submit the form via ajax. $(form).ajaxSubmit({ // The return data type is json. dataType: "json", // The callback. success: function(data, statusText) { // Alert the users to the message. window.alert(statusText); } }); } }); }); </script>    <script type="text/javascript"> // Make calls to rules("add", options). </script>    <%= Html.ClientSideValidation<Model>("model") %> </code></pre> <p>Finally, with all of this wired up, the last thing to do is what to do when the server-side method returns.</p> <p>You'll want the JSON that's returned from these calls to be something like a standardized viewmodel shell where you have the response-specific content wrapped in a more standardized piece that exposes the information you need across homogeneous calls, something like this:</p> <pre><code>{ // An integer, non-zero indicates faulure, with predefined ranges // for standard errors across all operations, with other ranges for custom // errors which are operation-specific. Examples of shared errors // are not authenticated, not authorized, etc, etc. resultCode: 0, // A string, which is to be displayed to the user (usually in the // form of a jQuery dialog, usually used for the common ranges of // errors defined above. message: null, // An object with operation-specific results. data: null } </code></pre> <p>For the errors on the server, return the same as above, but with a location which has the URL which the user should be redirected to on success (or null if it was not successful) and a map which can be passed directly to the <a href="http://docs.jquery.com/Plugins/Validation/Validator/showErrors#errors" rel="nofollow"><code>showErrors(errors)</code></a> method if there are errors on the fields:</p> <pre><code>{ resultCode: 0, message: null, data: { // Returned as a string. If not null, then this is the url // that the client should be redirected to, as the server-side // operation was successful. newLocation: null, // If not-null, then this is a map which has the names of the // fields with the errors, along with the errors for the fields. errors: { "model.title": "The title already exists in the system.", "model.body": "The body cannot have malicious HTML code in it." } } } </code></pre> <p>Given that, the <a href="http://docs.jquery.com/Ajax/jQuery.ajax#options" rel="nofollow"><code>success</code> field of the <code>options</code> parameter</a> passed to <a href="http://jquery.malsup.com/form/#api" rel="nofollow"><code>ajaxSubmit</code></a> should be clear:</p> <pre><code>// The callback on a successful form // submission. success: function(data, statusText) { // If the new location is not null, then // redirect to that location. if (data.data.newLocation) { // Go to the new location. document.location.href = data.data.newLocation; // Get out. return; } // There are errors, pass them to the validator // for display. validator.showErrors(data.data.errors); } </code></pre> <p>All it does is check to see if the <code>newLocation</code> property is defined. If it is defined, then it redirects the current document to the location (which typically would be the url of the newly saved resource).</p> <p>If it is not defined, then it takes the map and passes it to <code>showErrors</code> on the validator returned by a call to <code>validate(options)</code>, setting the error messages using the positioning and style specified by the call to <code>validate(options)</code>.</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