All geek questions in one place

Validating jQuery using jQuery.Templates script

I am using jQuery templates for a bunch of the site I'm working on, and have reached the point where I need to decide how to go about implementing validation, clientide. Serverside is an Asp.Net Mvc Restful service that handles various models. Models are styled by DataAnnotations to describe validation. The following is an example (note that we are using the resource file to copy the error):

[Required( ErrorMessageResourceType = typeof(Validation), ErrorMessageResourceName = "HomeAddressRequired")] [StringLength(250, ErrorMessageResourceType = typeof(Validation), ErrorMessageResourceName = "HomeAddressStringLength")] public string Address { get; set; }

I used to just use Razor (or the old Asp.Net viewer until I switched to Mvc 3), which handled the creation of all the client decorations needed to connect jquery.validate.js. Now when I use jQuery templates, this is not so viable.

Here I see three options:

  • Modify the templates to manually enable validation and a copy of the error . This sucks because I will be forced to separately check client and server checks; it kind of kills the whole idea of ​​DataAnnotations.

  • Use an unobtrusive javascript approach to using Razor and Mvc 3 to help me render templates . Better since it reproduces validation for me, but with a performance hit. Also means that I use the server-side template engine ... to render templates. I can minimize performance with output caching.

  • Use an exclusively remote confirmation that returns model states for my models and writes my own adapter for jQuery validation to handle routing errors in the corresponding element . It has the ability to use Razor, but it kills a clean client check and means I have to write a complex plugin.

Ideally, when we deploy this thing, I should be able to serve the templates for the client as a static file without any direct dependency on the backend.

So, to my question: Using jQuery clientside and DataAnnotations templates on my serveride models, what is the most efficient means of processing validation without repeating itself?

+4
source share
1 answer

I will go with 2)

Error patterns can be hosted on the client side. Server-side code that does not match performance is code that sets the rules for jQuery.validation. But this cannot be avoided because your rules are defined in your .NET models.

I have a similar problem today, but with style I don't really like how jQuery.validation makes a shortcut for you. I want to override the output using jQuery templates. I also want my output to be in a different cell in the table.

Apparently you can override the validator.prototype.showLabel function in the plugin. Now you have full control over where to display and what to show if something fails.

Here is 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 this helps,

Chi

+2
source

Source: https://habr.com/ru/post/1340053/

More articles:


All Articles