title: How to in ASP.NET MVC prevent jquery ajax submit if validation fails
body: <p>I am using <code>ASP.NET 5 MVC RC1</code></p>
  
  <p>The jquery validation plugins that my ASP.NET MVC uses is the standard jquery.validate.js that a default ASP.NET 5 template project uses.</p>
  
  <pre><code> /*!
   * jQuery Validation Plugin v1.14.0
   *
   * http://jqueryvalidation.org/
   *
   * Copyright (c) 2015 Jörn Zaefferer
   * Released under the MIT license
   */
  </code></pre>
  
  <p>and jquery.validation.unobtrusive.js</p>
  
  <pre><code>/*!
  ** Unobtrusive validation support library for jQuery and jQuery Validate
  ** Copyright (C) Microsoft Corporation. All rights reserved.
  */
  </code></pre>
  
  <p>I provide a simple Required field example below to demonstrate my problem.</p>
  
  <p>ViewModel:</p>
  
  <pre><code>public class TierImportStatusUpdateViewModel
  {
      [Required]
      public string String1 { get; set; }
      [Required]
      public string String2 { get; set; }
      //more fields
  }
  </code></pre>
  
  <p>cshtml:</p>
  
  <pre><code>@model  MyViewModel
  &lt;form action="/controller/action" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#dic1" id="form1" method="post" class="allforms"&gt;
      @Html.LabelFor(model=&gt;model.String1)
      @Html.EditorFor(model=&gt;model.String1)
      @Html.ValidationMessageFor(model=&gt;model.String1)
     &lt;br&gt;
      @Html.LabelFor(model=&gt;model.String2)
      @Html.EditorFor(model=&gt;model.String2)
      @Html.ValidationMessageFor(model=&gt;model.String2)
      &lt;br&gt;
      &lt;button type="submit" class="btn btn-primary" id="submit" name="submit"&gt;submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The above validation works correctly. 
  If <code>String1</code> is not captured in the form the <code>POST</code> method is NOT called and error message is showed on the client side.</p>
  
  <p>I then use the following jquery as I'd like to catch all form submits and do some additional logic:</p>
  
  <pre><code>   $(".allforms").submit(function (e) {
  
          e.preventDefault();
  
          var self = this;
          $.ajax({
              processData: false,
              contentType: false,
              data: new FormData(this),
              type: $(this).attr('method'),
              url: $(this).attr('action'),
              success: function (data) {
                  //other logic
              }
          });
  
          return (false);
      });
  </code></pre>
  
  <p>This jquery function works and call my controller method when the button is clicked. 
  However when <code>String1</code> is not captured and submit is clicked, the validation kicks in and shows the error message but the jquery function still POSTS  the form.</p>
  
  <p>How do I prevent the jquery function to not call the ajax method if the existing  validation fields failed?</p>
  
  <p>There is no need for me to do my own validation as the validation message is being shown on screen. I just need to prevent the submit</p>
  
  <p>The only thing I could find in my form is the individual validation fields e.g</p>
  
  <pre><code> &lt;span class="text-danger field-validation-valid" data-valmsg-for="String1" data-valmsg-replace="true"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>and the form only has the <code>novalidate=novalidate</code> tag which the <code>jquery.validate.js</code> adds to all forms it is enabled on.</p>