jQuery Validation with jQuery.Templates Scenario
I'm using jQuery Templates for a bunch of a site I'm working on, and have reached a point where I need to decide how to go about implementing validation, clientside. Serverside is an Asp.Net Mvc Restful service that deals out various models. The models are decorated with DataAnnotations to describe the validation. Below is an example (note that we're using a resource file for the error copy):
[Required(
ErrorMessageResourceType = typeof(Validation),
ErrorMessageResourceName = "HomeAddressRequired")]
[StringLength(250,
ErrorMessageResourceType = typeof(Validation),
ErrorMessageResourceName = "HomeAddressStringLength")]
public string Address { get; set; }
Previously, I just used Razor (or the old Asp.Net view engine until we switched to Mvc 3), which handled generating all of the clientside decoration necessary for jquery.validate.js to hook into. Now that I'm using jQuery Templates, this is not quite as viable.
I see three options here:
Modify the templates to manually include the validation and error copy. This one sucks because I'll be forced to maintain client and serverside validation separately; it kinda kills the whole idea of DataAnnotations.
Leverage Razor and Mvc 3's unobtrusive javascript approach to help me render the templates. Better, since it reproduces the validation for me, but at a performance hit. Also means I'm using a serverside template engine...to render templates. I can minimize the performance hit through output caching.
Rely solely on remote validation that returns model states for my models and write my own adapter for jQuery Validate, to handle routing errors to the proper element. This one gets around having 开发者_JS百科to use Razor, but kills pure clientside validation and means I have to write a complicated plugin.
Ideally, when we deploy this thing I should be able to serve the templates to the client as a static file without any direct backend dependency.
So, to my question: Leveraging jQuery Templates clientside and DataAnnotations on my models serverside, what is the most effective means of handling validation without repeating myself?
I'll go with 2)
The error templates can sit on the client side. The server side code that is not performance friendly is the code that sets up the rules for jQuery.validation. But that's really cannot be avoided as your rules are defined in your .NET models.
I have a similar problem today but with styling, I don't quite like how jQuery.validation makes a label for you. I want to override the output with jQuery templates. I also want my output to be located in another cell of a table.
Apparently, you can override validator.prototype.showLabel function in the plugin. Now you have full control of where to display and what to display if something fails.
Here's an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<script type="text/javascript">
$.extend($.validator.prototype, {
showLabel: function (element, message) {
$(element).siblings('.validationLabel').remove();
$('#tmplValidationLabel').tmpl({ Message: message }).insertAfter($(element));
}
});
</script>
</head>
<body>
<form>
<div><input type="text" name="Email" /></div>
<div><input type="text" name="SomeName" /></div>
<input type="submit" value="Submit" />
</form>
<script type="x-jquery-tmpl" id="tmplValidationLabel">
<span class="validationLabel">
<b>${Message}</b> <span> :( </span>
</span>
</script>
<script type="text/javascript">
$(function () {
$('form').validate({
rules: {
Email: { required: true, email: true },
SomeName: "required"
},
messages: {
Email: { required: "Enter Email", email: "Not an email" },
SomeName: "Enter something man!"
}
});
});
</script>
</body>
</html>
Hope it helps,
Chi
加载中,请稍侯......
精彩评论