aspnet-validation
Enables ASP.NET MVC client-side validation without jQuery!
Install
npm install aspnet-validation
or
yarn add aspnet-validation
aspnet-validation uses Promise API, which is not supported in Internet Explorer. It is recommended to use promise-polyfill or ts-polyfill or core-js to resolve this issue...
Alternatively, download these:
If you are also using Bootstrap, you may un-jQuery the application by using https://github.com/thednp/bootstrap.native
Quick Start Guide
Via <script src="...">
// Exposes window['aspnetValidation']var v = ;v;
Via CommonJS / Browserify
;const aspnetValidation = ; let v = ;v;
Via TypeScript / ES Modules
;; ;v.bootstrap;
Shameless self-promotion: use instapack for easy, rapid, and painless web application front-end development using TypeScript!
Why?
jquery-3.3.2.min.js + jquery.validate.min.js + jquery.validate.unobtrusive.min.js = 112 KB
aspnet-validation.min.js: 10.6 KB (9.46%, ~4 KB GZIP)
- promise-polyfill: +3.06 KB (< 1 KB GZIP)
Building the Source Code
git clone https://github.com/ryanelian/aspnet-validation.gitnpm installnpm run build # If using PowerShell: .\build.ps1
Adding Custom Validation
Example stolen from https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation
Server Code (C#)
public class ClassicMovieAttribute : ValidationAttribute, IClientModelValidator{ private int _year; public ClassicMovieAttribute(int Year) { _year = Year; } protected override ValidationResult IsValid(object value, ValidationContext validationContext) { Movie movie = (Movie)validationContext.ObjectInstance; if (movie.Genre == Genre.Classic && movie.ReleaseDate.Year > _year) { return new ValidationResult(GetErrorMessage()); } return ValidationResult.Success; } public void AddValidation(ClientModelValidationContext context) { if (context == null) { throw new ArgumentNullException(nameof(context)); } MergeAttribute(context.Attributes, "data-val", "true"); MergeAttribute(context.Attributes, "data-val-classicmovie", GetErrorMessage()); var year = _year.ToString(CultureInfo.InvariantCulture); MergeAttribute(context.Attributes, "data-val-classicmovie-year", year); }}
Client Code
;; v.addProvider'classicmovie',; v.bootstrap;
Adding Custom Asynchronous Validation
Other than boolean
and string
, addProvider
callback accepts Promise<string | boolean>
as return value:
v.addProvider'io',;