StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to use the jQuery Validation plugin with metadata, jQuery Forms and xVal together?
text
Body
copied!<p>I've been doing some development using the <a href="http://xval.codeplex.com/" rel="nofollow noreferrer">xVal</a> framework for .NET to link up some of the validation rules for models on the server side along with some client side validation using the <a href="http://plugins.jquery.com/project/validate" rel="nofollow noreferrer">jQuery Validation plugin</a> along with the <a href="http://jquery.malsup.com/form/" rel="nofollow noreferrer">jQuery Form plugin</a> for submitting the form.</p> <p>However, I'm having problems linking them all together.</p> <p>I'm trying to achieve following:</p> <ol> <li><p>Allow the client to perform basic validation using rules defined by calling <a href="http://docs.jquery.com/Plugins/Validation/rules#.22add.22rules" rel="nofollow noreferrer"><code>rules("add", options")</code></a> plugin for jQuery Validation (this is what xVal uses to get rules defined on the server side on the model).</p></li> <li><p>If the client validation succeeds, make the call to the server to input the form data performing validation again (on items that were validated on the client, as well as any other validation which could not be performed in the client).</p></li> <li><p>Have the server return an object in JSON which indicate any errors which might have specific fields and then set the error display for the fields.</p></li> </ol> <p>I've set up the metadata for the plugin in the ASP.NET MVC page through a call to xVal in the following way:</p> <pre><code><%= Html.ClientSideValidation<Model>("model") %> </code></pre> <p>This translates into the following on the client side:</p> <pre><code><script type="text/javascript"> xVal.AttachValidator("model", { "Fields": [ { "FieldName":"title", "FieldRules": [ { "RuleName":"Required", "RuleParameters":{} }, { "RuleName":"StringLength", "RuleParameters": { "MaxLength":"250" } } ] }, { "FieldName":"body", "FieldRules": [ { "RuleName":"Required", "RuleParameters":{} } ] } ] }, {}) </script> </code></pre> <p>The above really just translates into a series of calls to <code>rules("add", options)</code> which the jQuery validator plugin then processes.</p> <p>However when trying to post this form via jQuery forms, the validation doesn't take place on the form values. The form submits, but the values aren't validated at all.</p> <p>How can I submit the form using the jQuery Form plugin while being validated by the jQuery Validation plugin through a call to <code>ajax</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