diff --git a/README.MD b/README.MD index 69e4b72..8f33eb3 100644 --- a/README.MD +++ b/README.MD @@ -71,6 +71,8 @@ v.bootstrap(); **aspnet-validation.min.js:** 10.6 KB **(9.46%, ~4 KB GZIP)** - **promise-polyfill**: +3.06 KB (< 1 KB GZIP) +Also, `jquery.validate.unobtrusive.min.js` has not been meaningfully updated in over a decade, and is hard to configure. + ## Building the Source Code ```powershell @@ -245,6 +247,21 @@ let form = document.getElementById('my-form'); v.scan(form); ``` +## Customizing CSS for use with other libraries + +One can customize the CSS classes so the generated markup is compatible with various frameworks. For example, to integrate with [Bootstrap](https://getbootstrap.com/docs/5.3/forms/validation) (v5+): + +```js +var v = new aspnetValidation.ValidationService(); +v.ValidationInputCssClassName = 'is-invalid'; // change from default of 'input-validation-error' +v.ValidationInputValidCssClassName = 'is-valid'; // change from default of 'input-validation-valid' +v.ValidationMessageCssClassName = 'invalid-feedback'; // change from default of 'field-validation-error' +v.ValidationMessageValidCssClassName = 'valid-feedback'; // change from default of 'field-validation-valid' +//v.ValidationSummaryCssClassName = 'validation-summary-errors'; // unnecessary: bootstrap lacks validation summary component +//v.ValidationSummaryValidCssClassName = 'validation-summary-valid'; // " +v.bootstrap(); +``` + ## Logging There is a rudimentary logging infrastructure in place if you want to get more insight into what the library is doing. diff --git a/src/index.ts b/src/index.ts index 8925c69..f9c6e13 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1419,7 +1419,7 @@ export class ValidationService { ValidationSummaryCssClassName = "validation-summary-errors"; /** - * Override CSS class name for valid validation summary. Default: 'field-validation-valid' + * Override CSS class name for valid validation summary. Default: 'validation-summary-valid' */ ValidationSummaryValidCssClassName = "validation-summary-valid"; }