17

I have the following view in ASP.net MVC 3:

@model Models.CreateProjectViewModel

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

@using( Html.BeginForm() ) {
    @Html.TextBoxFor(m => m.ProjectName)
    @Html.ValidationMessageFor(m => m.ProjectName)

    <p>
        <input type="submit" value="Save" />
    </p>
}

I am using unobtrusive javascript with jQuery and the Fluent Validation framework.

When I click the Save button and validation fails, is there some event I can hook into to call some custom javascript? 

function validationFailed() {
    // do something here only if validation failed
}

How would I tie into the validation so that when it failed (and only if it failed) I could call my validationFailed() function.

Dismissile
  • 32,564
  • 38
  • 174
  • 263
  • What exactly are you trying to do? I know you want to run some javascript if it fails, but what are trying to achieve by doing that? – Erik Funkenbusch Oct 08 '11 at 20:07

2 Answers2

36

As jQuery/Validation docs says, you could use invalidHandler to react when an invalid form is submitted.

But since MVC unobtrusive validation instantiates the Validation itself, you have to hook this event later.

Using exactly the same mechanism as the jQuery/Validation does: you could bind your code to the form elements custom event 'invalid-form.validate', witch corresponds to the invalidHandler!

$(document).ready(function() {
    $('#myform').bind('invalid-form.validate',function(){
        alert('invalid form!');
    });
});

to give your form an id use:

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myform" })) {
}

Update:

An alternative way to get the existing validation object is calling validate() on the form. If a validator for this form was already created, it will be returned:

Edit: after initialization occured, changing .settings.invalidHandler is too late for binding. So the following snippet will not work [anymore] unless you re-init the validator.

$(document).ready(function() {
    var existingValdiation = $("#myform").validate();
    //the settings property corresponds to the options parameter
    existingValdiation.settings.invalidHandler = function (form) {
        alert('invalid form!');
    };
    // not recommended:
    // re-init would bind settings.invalidHandler to 'invalid-form.validate'
    // existingValdiation.init();
});
Martin Meixger
  • 2,547
  • 24
  • 26
4

You can use the invalidHandler, I believe that is in jquery validation.

invalidHandler Callback
Callback for custom code when an invalid form is submitted. Called with a event object as the first argument, and the validator as the second.

Shimmy Weitzhandler
  • 101,809
  • 122
  • 424
  • 632
  • If I am using Data Annotations or Fluent Validation, will this interfere with me creating a validate handler in my view? – Dismissile Oct 04 '11 at 17:57
  • This will just be a callback that is fired when the form that is submitted is invalid. All the validation you create via data annotations, etc.. will work as normal. –  Oct 04 '11 at 18:01
  • This isn't working. When I add validate() to my form it just gets ignored. I think there is a conflict between my validate handler that data annotations is creating and the one I am trying to add manually. – Dismissile Oct 05 '11 at 15:51
  • You will need to either ask another question or show more information. –  Oct 05 '11 at 17:23
  • Figured out the problem. I had a script conflict that was preventing it from working. Two places were trying to register the validation script. – Dismissile Oct 11 '11 at 16:19
  • @Dismissle, how did you get this to work? I have the [exact same scenario](http://stackoverflow.com/questions/11530208) -- my view looks almost identical to yours -- and I've tried both answers on this, neither are working. :( – Jerad Rose Jul 18 '12 at 14:29