jQuery.validate doesn't work with ASP.NET Core

Question

I've successfully made a working jQuery.validation form for my site in just HTML, CSS and JS (with dependencies: jQuery and Validation). The problem is when I'm in a clean ASP.NET Core web project and I use the exact same code, it just doesn't seem to use my custom validation parameters in JavaScript

The validation works in all cases. However, my custom [options] for .validate([options]) don't seem to work on ASP.NET Core

Example of the working code: JSFiddle

HTML:

<form method="post">
<fieldset>
    <div class="master">
      <input name="name" id="name" placeholder="Name" minlength="2" maxlength="40" required />
    </div>
    <div class="master">
      <input name="email" id="email" placeholder="Email Address" type="email" required />
    </div>
    <div class="master">
      <input name="company" placeholder="Company Name" />
    </div>
    <div class="master">
      <input name="website" placeholder="Website" type="url" required />
    </div>

    <button type="submit">Next</button>
</fieldset>
</form> 

CSS:

.master {
  padding: 10px;
  background-color: white;
}

.has-error {
  background-color: red;
}

.has-success {
  background-color: green;
}

JS:

$('form').validate({
    // This disables the default validation notifications to the user.
    // Instead I'll be using CSS colors to notify users of valid or invalid fields
    errorPlacement: function (error, element) { },

    // Invalid field produces a red-background in parent element
    highlight: function(element) {
    $(element).parent().addClass('has-error').removeClass('has-success');
  },

  // Valid field produces a green-background in parent element
  unhighlight: function(element) {
    $(element).parent().removeClass('has-error').addClass('has-success');
  }
});

My JavaScript .validate([options]) does 3 things:

1. Remove jQuery.validation's default notification option
2. If <field> is INVALID, parent element background-color is red
3. If <field> is VALID, parent element background-color is green

---

Note:

• Updated my ASP.NET Core (1.1) to the latest stable version
  • Downgraded to ASP.NET Core 1.0 to test
• Added latest jQuery via bower, local and CDN (for testing)
• Added latest Validate via bower, local and CDN (for testing)
  • According to Validate's website certain versions of jQuery has to be used for compatibility. I tested all the versions via bower, local and CDN
• Made a raw HTML, CSS and JS version with everything stripped out (dependencies included) in JSFiddle, CodePen and local. Everything worked perfectly but not in ASP project.
• External or Inline JavaScript, no changes.

---

My conclusion: The validation works in all cases, which means both ASP.NET Core applications and plain HTML - CSS - JS have properly functional validation.

The only thing that doesn't work is when I provide [options] in my $('form').validate([options]); in a ASP.NET Core application. I'm not sure why my options aren't being used.

Official jQuery.validate page on .validate([options])

Answer 1

I figured it out the problem. It had to do with jQuery.validate([option]) object property: success

It directly conflicts with two other properties: highlight and unhighlight

For example:

$('form').validate({
    errorPlacement: function (error, element) { },

    highlight: function (element) {
        // Do stuff
    },

    unhighlight: function (element) {
        // Do stuff
    }

    success: function (element) {
        // Do stuff
    }
});

The success property completely uses a different way of notifying the user of invalid fields via tooltips. Where as highlight and unhighlight has more of a custom way for the developer to have more control.

In ASP.NET Core since jQuery.validate comes shipped with every ASP.NET Core Web Application, it applies its own success property as apart of its scaffolding somewhere within build.

The way I got around this is by explicitly calling my JS script last and placing a callback to any function within the success function.