How to in ASP.NET MVC prevent jquery ajax submit if validation fails
<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>