Validating using unobtrusive before ajax post

Question

So I have been playing around with the Anti Forgery Token, making progress thanks to you guys.

I have figured out a solution to merge form values anf get my ActionMethods to not puke on the AntiForgery token... I have unfortunately broken validation in the process. The AJAX post fires before client side validation / client side validation is ignored. Server side works however I would dig some validation before the post.. Here is the code I am using.

$(document).ready(function () {
 $('input[type=submit]').live("click", function (event) {
     event.preventDefault();

     // Form with the AntiForgeryToken in it
     var _tokenForm = $(this).parents().find("#__AjaxAntiForgeryForm");

     // Current Form we are using
     var _currentForm = $(this).closest('form');

     // Element to update passed in from AjaxOptions
     var _updateElement = $(_currentForm).attr("data-ajax-update");

     // Serialize the array
     var arr = $(_currentForm).serializeArray();

     //Merge TokenForm with the CurrentForm
     $.merge(arr, $(_tokenForm).serializeArray());


     // The AJAX Form Post stuff
     $.ajax({
         type: "POST",
         url: $(_currentForm).attr('action'),
         data: arr,
         success: function (data) {
             $(_updateElement).html(data);
         }
     });

     return false;
 });

});

So I am thinking that I need to handle the client side validation some way before the $.ajax goo... Any suggestions would possibly save me some time.

Woodbridge

Please note one other issue you will experience. Since you are essentially duplicating what is done by jquery.unobtrusive-ajax.js, there will be two posts to the server. It also occurs to me that this entire workaround is unnecessary if you add an AntiForgeryToken into each form on your page, since jquery.unobtrusive-ajax.js will pass back any __RequestVerificatioToken field found within the form to be submitted. – Taper

Well, I did try putting the token in each form however when using @Ajax.BeginForm the token is not getting put in to the forms collection where it has to be in order for things to work. – Woodbridge

AS well, what if I wanted to make an ajax call and there is no form? This is quite common. – Woodbridge

I have a form using @Ajax.BeginForm() which contains an AntiForgeryToken, and which is submitted using jquery.unobtrusive-ajax.js, and when I inspect with Fiddler, I see that __RequestVerificationToken has been submitted. As for submitting AJAX without a form, that is a separate consideration, which is not handled by jquery.unobtrusive-ajax.cs, which relies on a form existing. – Taper

Yes, which in my original post I was asking how to manually fire client validation before the post. I also don't have the validation token in the forms for my partial views, the token is generated in the main layout. I see no need to generate one token per form and subsequent changing of cookies. I only see one post in Fiddler by the way, not sure why you would get 2 of them. – Woodbridge

Answer 1

Call this:

var formValid = $("#FormId").validate().form();

if (!formValid) return false;

Added into your code:

$(document).ready(function () {
 $('input[type=submit]').live("click", function (event) {
     event.preventDefault();

     // Form with the AntiForgeryToken in it
     var _tokenForm = $(this).parents().find("#__AjaxAntiForgeryForm");

     // Current Form we are using
     var _currentForm = $(this).closest('form');

     var isValid = $(_currentForm).validate().form();

     if (!isValid) return false;

     // Element to update passed in from AjaxOptions
     var _updateElement = $(_currentForm).attr("data-ajax-update");

     // Serialize the array
     var arr = $(_currentForm).serializeArray();

     //Merge TokenForm with the CurrentForm
     $.merge(arr, $(_tokenForm).serializeArray());


     // The AJAX Form Post stuff
     $.ajax({
         type: "POST",
         url: $(_currentForm).attr('action'),
         data: arr,
         success: function (data) {
             $(_updateElement).html(data);
         }
     });

     return false;
 });
});

Outmost

I was about to recode this whole thing to use $('form').live("submit the validation seems to work there. I like this better though. – Woodbridge

Future readers, note: several months after this answer was posted, jQuery.live() was deprecated (api.jquery.com/live). – Chopping