Fixing JQuery Validation Class Issues in Your Forms

Описание: This guide explores effective solutions for modifying the `errorClass` and `validClass` in JQuery validation, especially with unobtrusive validation plugins in ASP.NET Core.
---
This video is based on the question https://stackoverflow.com/q/76708829/ asked by the user 'Reafidy' ( https://stackoverflow.com/u/795231/ ) and on the answer https://stackoverflow.com/a/76716948/ provided by the user 'Reafidy' ( https://stackoverflow.com/u/795231/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: JQuery Validation of Form

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the Problem with JQuery Validation Classes

When working with form validation in web applications, it’s common to use libraries like JQuery Validate and Unobtrusive Validation, particularly in environments like ASP.NET Core. However, developers often encounter challenges when they try to customize the appearance of validation messages.

A prevalent issue is when your custom validation classes, intended to give a unique style to valid and invalid fields, revert to default classes like input-validation-error and valid. This can be frustrating, especially when there are no visible errors in the console.

The User's Scenario

One developer faced this exact issue while working on a form that required validation. Despite correctly setting up the .validate() function with custom class parameters, the error and valid classes didn’t reflect the desired styles. The suspicion arose that the unobtrusive plugin might be interfering with custom settings.

He was using:

JQuery: v3.7.0

JQuery Validate: v1.19.5

JQuery Validate Unobtrusive: v4.0.0

Here’s the relevant code snippet of the validation setup:

[[See Video to Reveal this Text or Code Snippet]]

Despite this, the classes were not taking effect as expected.

Proposed Solution

To resolve the issue, the developer needed to ensure that both the JQuery Validator and the Unobtrusive settings shared the same custom class configurations. More specifically, by setting defaults for both validation systems in one go, he could achieve consistent behavior.

Step-by-Step Guide

Define Custom Class Settings
Create a JavaScript object to define the custom classes for validation states.

[[See Video to Reveal this Text or Code Snippet]]

Set Validator Defaults
Use jQuery.validator.setDefaults() to apply the custom settings globally for the JQuery Validate plugin.

[[See Video to Reveal this Text or Code Snippet]]

Apply Unobtrusive Options
Next, assign the same custom settings to the unobtrusive validation options.

[[See Video to Reveal this Text or Code Snippet]]

Complete Implementation

Here’s how the modified JavaScript section would look:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By ensuring both the JQuery Validate and Unobtrusive validation settings align with custom classes, developers can easily manage form validation and maintain stylistic consistency.

If you’re encountering similar issues in your projects, consider this approach and see how effectively it resolves the conflicts between default behaviors of validation libraries. Happy coding!