Fix image URLs to relative paths, add code block fencing
This commit is contained in:
@@ -5,7 +5,10 @@ slug: jquery-validate-and-jeditable-part-2
|
||||
published: true
|
||||
---
|
||||
|
||||
When using [Jeditable](http://www.appelsiini.net/projects/jeditable), there is no form element to bind [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) rules with. Instead, when an editable element is clicked or activated, it dynamically creates a new form and input element and destroys them after the user is done editing. For the ViewModel from [Part 1](/2010/01/01/jQueryValidateAndJeditablePart1.aspx), the View might be rendered like so for [Jeditable](http://www.appelsiini.net/projects/jeditable):<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<ValidateViewModel>" %>
|
||||
When using [Jeditable](http://www.appelsiini.net/projects/jeditable), there is no form element to bind [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) rules with. Instead, when an editable element is clicked or activated, it dynamically creates a new form and input element and destroys them after the user is done editing. For the ViewModel from [Part 1](/2010/01/01/jQueryValidateAndJeditablePart1.aspx), the View might be rendered like so for [Jeditable](http://www.appelsiini.net/projects/jeditable):
|
||||
|
||||
```
|
||||
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<ValidateViewModel>" %>
|
||||
<asp:Content ContentPlaceHolderID="MainContent" runat="server">
|
||||
<% using(Html.BeginForm()) {%>
|
||||
<%= Html.ValidationSummary() %>
|
||||
@@ -20,8 +23,12 @@ When using [Jeditable](http://www.appelsiini.net/projects/jeditable), there is n
|
||||
</div>
|
||||
<%} %>
|
||||
</asp:Content>
|
||||
```
|
||||
|
||||
[xVal](http://xval.codeplex.com/)’s ClientSideValidation<TViewModel>() used in [Part 1](/2010/01/01/jQueryValidateAndJeditablePart1.aspx) won’t work to validate this. The reason? It generates a script that binds validation directly to the form elements on page load. The rendered script looks for the ViewModel looks like:<script type="text/javascript">
|
||||
[xVal](http://xval.codeplex.com/)’s `ClientSideValidation<TViewModel>()` used in [Part 1](/2010/01/01/jQueryValidateAndJeditablePart1.aspx) won’t work to validate this. The reason? It generates a script that binds validation directly to the form elements on page load. The rendered script looks for the ViewModel looks like:
|
||||
|
||||
```
|
||||
<script type="text/javascript">
|
||||
xVal.AttachValidator(null,
|
||||
{"Fields":[
|
||||
{
|
||||
@@ -52,8 +59,12 @@ xVal.AttachValidator(null,
|
||||
}
|
||||
]}, {})
|
||||
</script>
|
||||
```
|
||||
|
||||
The rules are in the xVal’s StandardJSON format and the AttachValidator function (in xVal.jquery.validate.js) scans the DOM and attaches [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) rules as attributes to the matched input elements. Since [Jeditable](http://www.appelsiini.net/projects/jeditable) doesn’t create these elements until they’re actively being edited, the rules have nothing to attach to since they don’t exist yet. Fortunately, [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) provides several strategies for defining the rules. In addition to being able to attach attributes to the input elements, the rules can be placed in a separate data structure. [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) refers to these as “static rules”. Instead of attaching the xVal rule set directly to the elements, it can be adapted to the static rule set that [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) can use directly. The structure for the ViewModel rules will look like: {
|
||||
The rules are in the xVal’s StandardJSON format and the `AttachValidator` function (in `xVal.jquery.validate.js`) scans the DOM and attaches [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) rules as attributes to the matched input elements. Since [Jeditable](http://www.appelsiini.net/projects/jeditable) doesn’t create these elements until they’re actively being edited, the rules have nothing to attach to since they don’t exist yet. Fortunately, [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) provides several strategies for defining the rules. In addition to being able to attach attributes to the input elements, the rules can be placed in a separate data structure. [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) refers to these as “static rules”. Instead of attaching the xVal rule set directly to the elements, it can be adapted to the static rule set that [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) can use directly. The structure for the ViewModel rules will look like:
|
||||
|
||||
```
|
||||
{
|
||||
rules: {
|
||||
StringRequired: {
|
||||
required: true
|
||||
@@ -73,16 +84,26 @@ The rules are in the xVal’s StandardJSON format and the AttachValidator functi
|
||||
}
|
||||
}
|
||||
|
||||
I've adapted some javascript to do this conversion - it's available [here](http://popcyclical.com/content/binary/images/jQueryValidateandJeditable_E71E/xValRuleAdapter.js). To get the ViewModel’s rules into this format for javascript consumption, this line is added:<script type="text/javascript">
|
||||
```
|
||||
|
||||
I've adapted some javascript to do this conversion - it's available [here](../media/images/jQueryValidateandJeditable_E71E/xValRuleAdapter.js). To get the ViewModel’s rules into this format for javascript consumption, this line is added:
|
||||
|
||||
```
|
||||
<script type="text/javascript">
|
||||
var validateOptions
|
||||
= convertXvalToValidateOptions(
|
||||
<%= Html.ClientSideValidationRules<ValidateViewModel>()%>
|
||||
);
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
To get these attached to form elements as soon as the user activates them, [Jeditable](http://www.appelsiini.net/projects/jeditable)’s “plugin” feature is utilized:$(function() { // <- on document ready
|
||||
To get these attached to form elements as soon as the user activates them, [Jeditable](http://www.appelsiini.net/projects/jeditable)’s “plugin” feature is utilized:
|
||||
|
||||
```
|
||||
$(function() { // <- on document ready
|
||||
// register plugin with Jeditable to tie in jQuery Validate
|
||||
$.editable.types['text'].plugin = bindValidate;
|
||||
|
||||
@@ -122,18 +143,20 @@ function jeditableValidate(settings, self) {
|
||||
return $('form', self).valid();
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
With this glue in place, the form elements will now be validated with the rules defined in the ViewModel. All fields valid:
|
||||
|
||||
[](http://popcyclical.com/content/binary/images/jQueryValidateandJeditable_E71E/jQueryValidateJeditable1.png)
|
||||
[](../media/images/jQueryValidateandJeditable_E71E/jQueryValidateJeditable1.png)
|
||||
|
||||
…and here after both have invalid values:
|
||||
|
||||
[](http://popcyclical.com/content/binary/images/jQueryValidateandJeditable_E71E/jQueryValidateJeditable2.png)
|
||||
[](../media/images/jQueryValidateandJeditable_E71E/jQueryValidateJeditable2.png)
|
||||
|
||||
A few notes:
|
||||
|
||||
- Any additional options to be sent to [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) can be attached to the validateOptions object. I’ve used this to place all error messages into a separate errorLabelContainer (like [here](http://stackoverflow.com/questions/61456/mvc-net-jquery-validation)).
|
||||
- Any additional options to be sent to [jQuery Validate](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) can be attached to the `validateOptions` object. I’ve used this to place all error messages into a separate `errorLabelContainer` (like [here](http://stackoverflow.com/questions/61456/mvc-net-jquery-validation)).
|
||||
|
||||
- I feel that AttachValidator function in xVal.jquery.validate.js from could become more loosely coupled by separating the rule conversion from the DOM element attachment.
|
||||
- I feel that AttachValidator function in `xVal.jquery.validate.js` from could become more loosely coupled by separating the rule conversion from the DOM element attachment.
|
||||
|
||||
I think both of these jQuery libraries provide a great benefit when creating interactive and helpful forms. Kudos to [Jörn Zaefferer](http://bassistance.de/) and [Mika Tuupola](http://www.appelsiini.net/) for the good work. xVal is likewise an excellent library – thanks to [Steve Sanderson](http://www.codeplex.com/site/users/view/SteveSanderson).
|
||||
Reference in New Issue
Block a user