Enables ASP.NET MVC client-side validation without jQuery!
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
<script src="promise-polyfill.min.js"></script>
<script src="aspnet-validation.min.js"></script>
// Exposes window['aspnetValidation']
var v = new aspnetValidation.ValidationService();
v.bootstrap();
require('core-js');
const aspnetValidation = require('aspnet-validation');
let v = new aspnetValidation.ValidationService();
v.bootstrap();
import 'ts-polyfill';
import { ValidationService } from 'aspnet-validation';
let v = new ValidationService();
v.bootstrap();
Shameless self-promotion: use instapack for easy, rapid, and painless web application front-end development using TypeScript!
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)
git clone https://github.com/ryanelian/aspnet-validation.git
npm install
npm run build # If using PowerShell: .\build.ps1
Example stolen from https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation
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);
}
}
import { ValidationService } from 'aspnet-validation';
let v = new ValidationService();
v.addProvider('classicmovie', (value, element, params) => {
if (!value) {
// Let [Required] handle validation error for empty input...
return true;
}
// Unlike the original, data-val-classicmovie-year is bound automatically to params['year'] as string!
let year = parseInt(params.year);
let date = new Date(value);
let genre = (document.getElementById('Genre') as HTMLSelectElement).value;
if (genre && genre === '0') {
return date.getFullYear() <= year;
}
return true;
});
v.bootstrap();
Other than boolean
and string
, addProvider
callback accepts Promise<string | boolean>
as return value:
v.addProvider('io', (value, element, params) => {
if (!value) {
return true;
}
return async () => {
let result: number = await Some_IO_Operation(value);
return result > 0;
};
});