Geek Answers Handbook

ASP.Net MVC: Can you use annotations / data validation with an AJAX / jQuery call?

Can you use annotations / data validation with an AJAX / jQuery call? If yes, provide an example or message that shows an example.

Basically I saw an example of using data annotations, however it was with the full message back. Is there a way to make an AJAX / jQuery call? Not sure how you do this, since I'm not sure how you will build the Model object on the client side. (I guess this is what you would need to do.)

Someone told me that this can be done, but I just don’t understand how it can be.

Thank you for your help.

+4
source share
2 answers

If you use Html.AjaxForm (instead of Html.BeginForm), then it will check for Ajax usage.

However, I do not think you can check the use of jQuery. Microsoft has its own Ajax libraries, and they call it / support it themselves. I do not think you can connect your own code between them.

+1
source

Yes - 100% I do this all the time. Use Ajax.BeginForm and use unobtrusive verification http://completedevelopment.blogspot.com/2011/02/unobstrusive-javascript-in-mvc-3-helps.html

this will emit everything you need on the client side .. although you need to reconnect validators again to tell jQuery that we have uploaded some content that you will need to check

I believe I got this idea / code from: http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/

anyway, that I have below and I use it, although I added a little debugging.

  (function ($) {
     $ .validator.unobtrusive.parseDynamicContent = function (selector) {

         var len = $ (selector) .length;

         // alert ('got length');
         if ($ (selector) .length == 0) {
             alert ('The selector (usually a div) passed in as the root level to start validation parsing at (rather than parsing the whole document again) could not be found in the DOM. Validation on this form will not likely continue. is: '+ selector);
             return
         }
         // use the normal unobstrusive.parse method
         $ .validator.unobtrusive.parse (selector);

         // get the relevant form
         var form = $ (selector) .first (). closest ('form');
         if (form.length == 0) {
             alert ('Could not find a form that was a parent of selector:' + selector + '\ nValidation may not work properly');
             return
         }


         // get the collections of unobstrusive validators, and jquery validators
         // and compare the two
         var unobtrusiveValidation = form.data ('unobtrusiveValidation');
         //alert(unobtrusiveValidation.length);
         var validator = form.validate ();

         $ .each (unobtrusiveValidation.options.rules, function (elname, elrules) {
             if (validator.settings.rules [elname] == undefined) {
                 var args = {};
                 $ .extend (args, elrules);
                 args.messages = unobtrusiveValidation.options.messages [elname];
                 // $ ('[name =' + elname + ']'). rules ("add", args);
                 $ ('[name = "' + elname + '"]'). rules ("add", args);
             } else {
                 $ .each (elrules, function (rulename, data) {
                     if (validator.settings.rules [elname] [rulename] == undefined) {
                         var args = {};
                         args [rulename] = data;
                         args.messages = unobtrusiveValidation.options.messages [elname] [rulename];

                         $ ('[name = "' + elname + '"]'). rules ("add", args);
                     }
                 });
             }
         });

     }
 }) ($);

then in each partial view (or page) that you use ajax to load, do the following: (note editCustomerAddress is the name of the div containing my new content, so jQuery does not need to rewrite everything on my page, but only from my dynamic content)

  <script type = "text / javascript">
         try {
             // Since this may have been loaded as dynamic content ensure jQuery client validation knows we should be validating the content in this view.
             // jQuery validation runs when the original page loads - on the original content and not on dynamic (in this case ajax) content.
             // We don't need to validate the whole form again, only from this div down.

             // if I have a problem in jQuery 5, then try: $ .validator.unobtrusive.parse ("# editZone> div> form"); 
             $ .validator.unobtrusive.parseDynamicContent ('# editCustomerAddress');
         }
         catch (err) {
             alert ('An error occured trying to tell jQuery to validate our new content. Ensure the code for parseDynamicContent has been included and you are referencing a valid element. Also, ensure the form has a context if it is a partial view by calling if ( ViewContext.FormContext == null) {ViewContext.FormContext = new FormContext ();} If that code is not present, data-val- * attributes will not be rendered. \ N '+ err);
         }

     </script>

In addition, you want your partial views that do not have their own ajax or html forms to have a form context through

@ {if (ViewContext.FormContext == null) {ViewContext.FormContext = new FormContext (); }

otherwise your data-val- * attributes will not be selected by helper methods. This is necessary if your views do not have Ajax.BeginForm or Html.BeginForm to create your own form context.

+7
source

More articles:


All Articles