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:

Remove jQuery.validation's default notification option
If <field> is INVALID, parent element background-color is red
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])

Doubtful that this has anything to do with ASP.Net (Core or otherwise) per se - other than referencing the scripts/css (paths, etc.). End of day client is client, server is server (latter is where all flavors of ASP.Net play). — EdSF
– EdSF, Commented Feb 24, 2017 at 0:44

Ollie Cee · Accepted Answer · 2017-02-24 04:20:36Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related