ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(validator): Adding error, warn, info categories support. (#204)

Browse source
This commit is contained in:
Lalit 2022-11-26 23:04:14 +05:30 committed by GitHub
parent 2f2c28b13f
commit 965a16aaec
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 141 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/demo/src/pages/index.astro
View file

@ -11,12 +11,20 @@ const form = new FormGroup([
{
name: "username",
label: "Username",
validators: [Validators.required],
validators: [
{
validator: Validators.required,
category: "info",
},
],
},
{
name: "email",
label: "Email",
validators: [Validators.email, Validators.required],
validators: [
{ validator: Validators.required },
{ validator: Validators.email, category: "warn" },
],
},
{
name: "password",
@ -52,7 +60,7 @@ const form = new FormGroup([
name: "comment",
label: "Feedback",
type: "textarea",
value: "Nice!"
value: "Nice!",
},
]);

4
packages/common/types/control.types.ts
View file

@ -1,3 +1,5 @@
import type { ValidatorRules } from "./validator.types";
/**
* `ControlType` determines the type of form control
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
@ -34,7 +36,7 @@ export interface ControlBase {
value?: string | number | string[];
label?: string;
placeholder?: string;
validators?: string[]; // TODO: implement validator type
validators?: ValidatorRules;
}
export interface Checkbox extends ControlBase {

7
packages/common/types/validator.types.ts
View file

@ -1,9 +1,16 @@
export type HookType = "onSubmit" | "onControlBlur" | "all";
export type CategoryType = "error" | "warn" | "info";
export type ValidatorRules =
| string[]
| { validator: string; category?: CategoryType }[];
export type ValidationResult = true | ValidationError;
export type ValidationError = {
error: string;
value: string;
limit?: number;
category?: string;
};

19
packages/form/components/Field.astro
View file

@ -20,19 +20,24 @@ export interface Props {
const { control, showValidationHints, showErrors = false, readOnly = false } = Astro.props;
const hasErrors: boolean | null = !!control.errors?.length;
const hasError: boolean = control.errors?.length ? control.errors[0]?.category === 'error' : false;
const hasWarn: boolean = control.errors?.length ? control.errors[0]?.category === 'warn' : false;
const hasInfo: boolean = control.errors?.length ? control.errors[0]?.category === 'info' : false;
---
<div class="field" data-validator-haserrors={hasErrors ? hasErrors.toString() : null}>
<div
class="field"
data-validator-error={hasError.toString()}
data-validator-warn={hasWarn.toString()}
data-validator-info={hasInfo.toString()}
>
<Label control={control} showValidationHints={showValidationHints}>
{
control.type === 'radio' ? (
<RadioGroup control={control as Radio} readOnly={readOnly} />
) :
control.type === 'dropdown' ? (
<RadioGroup control={control as Radio} readOnly={readOnly} />
) : control.type === 'dropdown' ? (
<DropdownControl control={control as Dropdown} readOnly={readOnly} />
) :
control.type === 'textarea' ? (
) : control.type === 'textarea' ? (
<TextAreaControl control={control as TextArea} readOnly={readOnly} />
) : (
<Input control={control} readOnly={readOnly} />

14
packages/form/components/Form.astro
View file

@ -60,9 +60,19 @@ const formId = Array.isArray(formGroups) ? uid() : formGroups?.id || null;
</style>
<style is:global>
[data-validator-hints='true'][data-validator-haserrors='true'],
[data-validator-hints='true'] [data-validator-haserrors='true'] {
[data-validator-hints='true'][data-validator-error='true'],
[data-validator-hints='true'] [data-validator-error='true'] {
color: red;
border-color: red;
}
[data-validator-hints='true'][data-validator-warn='true'],
[data-validator-hints='true'] [data-validator-warn='true'] {
color: orange;
border-color: orange;
}
[data-validator-hints='true'][data-validator-info='true'],
[data-validator-hints='true'] [data-validator-info='true'] {
color: blue;
border-color: blue;
}
</style>

20
packages/form/components/Label.astro
View file

@ -11,12 +11,18 @@ const { control, showValidationHints } = Astro.props;
const { validators = [] } = control;
const isRequired: boolean = showValidationHints && validators.includes('validator-required');
const isRequired: boolean =
showValidationHints &&
validators.some((validator) => {
if (typeof validator === 'string' && validator == 'validator-required') return true;
if (typeof validator === 'object' && validator.validator == 'validator-required') return true;
return false;
});
---
{
control.label && control.type !== "checkbox" && (
<label for={control.id} data-validation-required={isRequired ? "true" : null}>
control.label && control.type !== 'checkbox' && (
<label for={control.id} data-validation-required={isRequired ? 'true' : null}>
{control.label}
</label>
)
@ -25,15 +31,15 @@ const isRequired: boolean = showValidationHints && validators.includes('validato
<slot />
{
control.label && control.type === "checkbox" && (
<label for={control.id} data-validation-required={isRequired ? "true" : null}>
control.label && control.type === 'checkbox' && (
<label for={control.id} data-validation-required={isRequired ? 'true' : null}>
{control.label}
</label>
)
}
<style>
label[data-validation-required="true"]::before {
content: "*";
label[data-validation-required='true']::before {
content: '*';
}
</style>

19
packages/form/components/controls/Input.astro
View file

@ -7,23 +7,30 @@ import type { FormControl } from '../../core/form-control';
export interface Props {
control: FormControl;
readOnly?: boolean;
readOnly?: boolean;
}
const { control, readOnly } = Astro.props;
const { validators = [] } = control;
const hasErrors: boolean = !!control.errors?.length;
const hasError: boolean = control.errors?.length ? control.errors[0]?.category === 'error' : false;
const hasWarn: boolean = control.errors?.length ? control.errors[0]?.category === 'warn' : false;
const hasInfo: boolean = control.errors?.length ? control.errors[0]?.category === 'info' : false;
const validatorAttributes: Record<string, string> = validators?.reduce((prev, validator) => {
// @ts-ignore
const validatorAttributes: Record<string, string> = validators.reduce((prev, val) => {
const validator = typeof val === 'string' ? val : val.validator;
const split: string[] = validator.split(':');
const label: string = `data-${split[0]}` || 'invalid';
const value: string | null = split.length > 1 ? split[1] ?? null : 'true';
const category = typeof val === 'string' ? 'error' : val.category || 'error';
const categoryLabel: string = `data-${split[0]}-category`;
return {
...prev,
[label]: value,
[categoryLabel]: category,
};
}, {});
---
@ -36,8 +43,10 @@ const validatorAttributes: Record<string, string> = validators?.reduce((prev, va
checked={control.value === 'checked'}
placeholder={control.placeholder}
data-label={control.label}
data-validator-haserrors={hasErrors.toString()}
data-validator-error={hasError.toString()}
data-validator-warn={hasWarn.toString()}
data-validator-info={hasInfo.toString()}
readonly={readOnly || null}
disabled={(readOnly || null) && control.type === 'checkbox'}
disabled={(readOnly || null) && control.type === 'checkbox'}
{...validatorAttributes}
/>

9
packages/form/components/controls/TextArea.astro
View file

@ -13,14 +13,19 @@ const { control, readOnly = false } = Astro.props;
const { validators = [] } = control;
const validatorAttributes: Record<string, string> = validators?.reduce((prev, validator) => {
// @ts-ignore
const validatorAttributes: Record<string, string> = validators.reduce((prev, val) => {
const validator = typeof val === 'string' ? val : val.validator;
const split: string[] = validator.split(':');
const label: string = `data-${split[0]}` || 'invalid';
const value: string | null = split.length > 1 ? split[1] ?? null : 'true';
const category = typeof val === 'string' ? 'error' : val.category || 'error';
const categoryLabel: string = `data-${split[0]}-category`;
return {
...prev,
[label]: value,
[categoryLabel]: category,
};
}, {});
---
@ -35,5 +40,5 @@ const validatorAttributes: Record<string, string> = validators?.reduce((prev, va
readonly={readOnly || null}
{...validatorAttributes}
>
{ control.value }
{control.value}
</textarea>

7
packages/form/core/form-control.ts
View file

@ -9,6 +9,7 @@ import type {
ValidationError,
TextArea,
ControlBase,
ValidatorRules,
} from '@astro-reactive/common';
import ShortUniqueId from 'short-unique-id';
@ -23,15 +24,15 @@ export class FormControl {
private _isValid = true;
private _isPristine = true;
private _placeholder: string | null = null;
private _validators: string[] = [];
private _validators: ValidatorRules = [];
private _errors: ValidationError[] = [];
private _options: string[] | ControlOption[] = [];
private _rows: number | null = null;
private _cols: number | null = null;
private validate: (value: string, validators: string[]) => ValidationError[] = (
private validate: (value: string, validators: ValidatorRules) => ValidationError[] = (
value: string,
validators: string[]
validators: ValidatorRules
) => {
value;
validators;

3
packages/form/test/Field.astro.test.ts
View file

@ -52,7 +52,7 @@ describe('Field.astro test', () => {
it('Should server-render validation error attributes', async () => {
// arrange
const expectedResult = 'data-validator-haserrors="true"';
const expectedResult = 'data-validator-error="true"';
const props = {
control: {
label: 'FAKE LABEL',
@ -61,6 +61,7 @@ describe('Field.astro test', () => {
errors: [
{
error: 'required',
category: 'error',
},
],
value: '',

24
packages/validator/Validator.astro
View file

@ -24,6 +24,7 @@ const { hook = 'all', displayErrorMessages = false } = Astro.props;
// TODO: handle hooks / when to attach event listeners
// const form = document.querySelector('form');
import type { ValidatorRules } from '@astro-reactive/common';
import { clearErrors, validate } from './core';
// const hook: HookType = (document.getElementById('hook') as HTMLInputElement).value as HookType;
@ -38,22 +39,27 @@ const { hook = 'all', displayErrorMessages = false } = Astro.props;
.filter((attribute) => attribute.includes('data-validator-'))
.map((attribute) => {
const limit = element.getAttribute(attribute);
return `${attribute}:${limit}`;
});
return {
validator: `${attribute}:${limit}`,
category: element.getAttribute(`${attribute}-category`),
};
})
.filter((val) => val.category !== null); // Filter out validators without a category
const value =
element.type === 'checkbox' ? (element.checked ? 'checked' : '') : element.value;
const errors = validate(value, validators);
const errors = validate(value, validators as ValidatorRules);
// set element hasErrors
if (errors.length) {
element.parentElement?.setAttribute('data-validator-haserrors', 'true');
element.setAttribute('data-validator-haserrors', 'true');
element.classList.add('has-errors');
element.parentElement?.setAttribute(`data-validator-${errors[0]?.category}`, 'true');
element.setAttribute(`data-validator-${errors[0]?.category}`, 'true');
element.classList.add(`has-errors`);
// TODO: display error messages
} else {
element.parentElement?.removeAttribute('data-validator-haserrors');
element.removeAttribute('data-validator-haserrors');
element.classList.remove('has-errors');
element.parentElement?.removeAttribute(`data-validator-${errors[0]?.category}`);
element.removeAttribute(`data-validator-${errors[0]?.category}`);
element.classList.remove(`has-${errors[0]?.category}`);
}
});

61
packages/validator/core/validator-functions.ts
View file

@ -1,4 +1,4 @@
import type { ValidationError } from '@astro-reactive/common';
import type { ValidationError, ValidatorRules } from '@astro-reactive/common';
import { Validators } from './validator-names';
/**
@ -7,10 +7,19 @@ import { Validators } from './validator-names';
* @param validators - names of validation logic to be applied
* @returns errors - array of errors `ValidationError`
*/
export function validate(value: string, validators: string[]): ValidationError[] {
export function validate(value: string, validators: ValidatorRules): ValidationError[] {
return validators
.map((validator) => validator.replace('data-', ''))
.map((attribute): ValidationError | null => {
.map((validator) => {
if (typeof validator === 'string') {
return { attribute: validator.replace('data-', ''), category: 'error' };
}
return {
attribute: validator.validator.replace('data-', ''),
category: validator.category || 'error',
};
})
.map(({ attribute, category }): ValidationError | null => {
// TODO: implement dynamic import of function depending on validators
const split = attribute.split(':');
const validator = split[0];
@ -18,31 +27,31 @@ export function validate(value: string, validators: string[]): ValidationError[]
const limit = parseInt(limitStr || '0', 10);
if (validator === Validators.min()) {
return validateMin(value, limit);
return validateMin(value, limit, category);
}
if (validator === Validators.max()) {
return validateMax(value, limit);
return validateMax(value, limit, category);
}
if (validator === Validators.required) {
return validateRequired(value);
return validateRequired(value, category);
}
if (validator === Validators.requiredChecked) {
return validateRequiredChecked(value);
return validateRequiredChecked(value, category);
}
if (validator === Validators.email) {
return validateEmail(value);
return validateEmail(value, category);
}
if (validator === Validators.minLength()) {
return validateMinLength(value, limit);
return validateMinLength(value, limit, category);
}
if (validator === Validators.maxLength()) {
return validateMaxLength(value, limit);
return validateMaxLength(value, limit, category);
}
return null;
@ -51,12 +60,17 @@ export function validate(value: string, validators: string[]): ValidationError[]
}
export function clearErrors(event: Event) {
const categories = ['error', 'warn', 'info'];
const element = event.target as HTMLInputElement;
element.parentElement?.setAttribute('data-validator-haserrors', 'false');
element.setAttribute('data-validator-haserrors', 'false');
const parent = element.parentElement as HTMLElement;
categories.forEach((category) => {
parent.setAttribute(`data-validator-${category}`, 'false');
element.setAttribute(`data-validator-${category}`, 'false');
});
}
function validateMin(value: string, limit: number): ValidationError | null {
function validateMin(value: string, limit: number, category: string): ValidationError | null {
const isValid = parseInt(value, 10) >= limit;
if (!isValid) {
@ -64,13 +78,14 @@ function validateMin(value: string, limit: number): ValidationError | null {
value,
error: 'min',
limit: limit,
category,
};
}
return null;
}
function validateMax(value: string, limit: number): ValidationError | null {
function validateMax(value: string, limit: number, category: string): ValidationError | null {
const isValid = parseInt(value, 10) <= limit;
if (!isValid) {
@ -78,32 +93,35 @@ function validateMax(value: string, limit: number): ValidationError | null {
value,
error: 'max',
limit: limit,
category,
};
}
return null;
}
function validateRequired(value: string): ValidationError | null {
function validateRequired(value: string, category: string): ValidationError | null {
const isValid = !!value;
if (!isValid) {
return {
value,
error: 'required',
category,
};
}
return null;
}
function validateRequiredChecked(value: string): ValidationError | null {
function validateRequiredChecked(value: string, category: string): ValidationError | null {
const isValid = value === 'checked';
if (!isValid) {
return {
value,
error: 'requiredChecked',
category,
};
}
@ -111,7 +129,7 @@ function validateRequiredChecked(value: string): ValidationError | null {
}
// TODO: review regexp vulnerability
function validateEmail(value: string): ValidationError | null {
function validateEmail(value: string, category: string): ValidationError | null {
const isValid = String(value)
.toLowerCase()
.match(
@ -122,13 +140,14 @@ function validateEmail(value: string): ValidationError | null {
return {
value,
error: 'email',
category,
};
}
return null;
}
function validateMinLength(value: string, limit: number): ValidationError | null {
function validateMinLength(value: string, limit: number, category: string): ValidationError | null {
const isValid = value.length >= limit;
if (!isValid) {
@ -136,13 +155,14 @@ function validateMinLength(value: string, limit: number): ValidationError | null
value,
error: 'minLength',
limit: limit,
category,
};
}
return null;
}
function validateMaxLength(value: string, limit: number): ValidationError | null {
function validateMaxLength(value: string, limit: number, category: string): ValidationError | null {
const isValid = value.length <= limit;
if (!isValid) {
@ -150,6 +170,7 @@ function validateMaxLength(value: string, limit: number): ValidationError | null
value,
error: 'minLength',
limit: limit,
category,
};
}