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

feat(validator): server-side rendered validation errors (#123)

Browse source 
* feat(validator): server-side rendered validation errors

* test(form): field should render error

* refactor: remove comment

* fix: incorrect imports

* chore: update deps

* chore: update build commands
This commit is contained in:
Ayo Ayco 2022-10-22 04:35:16 +02:00 committed by GitHub
parent 82c121a85d
commit d128747240
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 1138 additions and 1129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.vscode/settings.json vendored
View file

@ -3,6 +3,6 @@
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"cSpell.words": ["Astro"],
"cSpell.words": ["Astro", "maxlength"],
"prettier.documentSelectors": ["**/*.astro"]
}

10
apps/demo/public/validator.js
View file

@ -1,10 +0,0 @@
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
console.log('build script');
});

100
apps/demo/src/pages/demo.astro
View file

@ -1,100 +0,0 @@
---
import Form, {
ControlConfig,
FormGroup,
FormControl,
} from "@astro-reactive/form";
const baseForm = new FormGroup([
{
name: "crust",
label: "Crust",
type: "radio",
value: [{ label: "Garlic", value: "garlic" },]
},
{
name: "size",
label: "Size",
type: "radio",
value: ["Small", "Medium", "Large"]
},
{
name: "sauce",
label: "Sauce",
type: "radio",
value: ["Tomato", "Barbeque"]
}
]);
const toppingsForm = new FormGroup([
{
name: "mushrooms",
label: "Mushrooms",
type: "checkbox"
},
{
name: "extraCheese",
label: "Extra Cheese",
type: "checkbox"
},
{
name: "onions",
label: "Onions",
type: "checkbox"
},
{
name: "peppers",
label: "Peppers",
type: "checkbox"
},
{
name: "pepperoni",
label: "Pepperoni",
type: "checkbox"
},
{
name: "sausage",
label: "Sausage",
type: "checkbox"
},
{
name: "chicken",
label: "Chicken",
type: "checkbox"
},
{
name: "pineapple",
label: "Pineapple",
type: "checkbox"
},
]);
baseForm.name = "Base"
toppingsForm.name = "Toppings";
// const config: ControlConfig = {
// type: "checkbox",
// name: "is-awesome",
// label: "is Awesome?",
// labelPosition: "right",
// };
// insert a control
// form.controls.push(new FormControl(config));
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Pizza Form Demo</h1>
<Form showValidationHints={true} formGroups={[baseForm, toppingsForm]} />
</body>
</html>

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

@ -27,7 +27,7 @@ const form = new FormGroup([
name: "rating",
label: "Rating",
type: "radio",
value: ["1", "2", "3", "4", "5"]
value: ["1", "2", "3", "4", "5"],
},
{
name: "agreement",
@ -35,9 +35,9 @@ const form = new FormGroup([
type: "radio",
value: [
{ label: "Agree", value: "yes" },
{ label: "Disagree", value: "no", labelPosition: "right" }
]
}
{ label: "Disagree", value: "no", labelPosition: "right" },
],
},
]);
form.name = "Simple Form";
@ -58,6 +58,9 @@ const userNameControl = form.get("username");
// set values dynamically
userNameControl?.setValue("RAMOOOON");
form.get("is-awesome")?.setValue("checked");
// setting an invalid value will cause errors as server-rendered
form.get("email")?.setValue("invalid-email");
---
<html lang="en">

49
apps/demo/src/pages/pizza-delivery.astro
View file

@ -1,9 +1,5 @@
---
import Form, {
ControlConfig,
FormGroup,
FormControl,
} from "@astro-reactive/form";
import Form, { FormGroup } from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator";
const baseForm = new FormGroup([
@ -11,62 +7,62 @@ const baseForm = new FormGroup([
name: "crust",
label: "Crust",
type: "radio",
value: [{ label: "Garlic", value: "garlic" },]
value: [{ label: "Garlic", value: "garlic" }],
},
{
name: "size",
label: "Size",
type: "radio",
value: ["Small", "Medium", "Large"]
value: ["Small", "Medium", "Large"],
},
{
name: "sauce",
label: "Sauce",
type: "radio",
value: ["Tomato", "Barbeque"]
}
value: ["Tomato", "Barbeque"],
},
]);
const toppingsForm = new FormGroup([
{
name: "mushrooms",
label: "Mushrooms",
type: "checkbox"
type: "checkbox",
},
{
name: "extraCheese",
label: "Extra Cheese",
type: "checkbox"
type: "checkbox",
},
{
name: "onions",
label: "Onions",
type: "checkbox"
type: "checkbox",
},
{
name: "peppers",
label: "Peppers",
type: "checkbox"
type: "checkbox",
},
{
name: "pepperoni",
label: "Pepperoni",
type: "checkbox"
type: "checkbox",
},
{
name: "sausage",
label: "Sausage",
type: "checkbox"
type: "checkbox",
},
{
name: "chicken",
label: "Chicken",
type: "checkbox"
type: "checkbox",
},
{
name: "pineapple",
label: "Pineapple",
type: "checkbox"
type: "checkbox",
},
]);
@ -88,21 +84,9 @@ const infoForm = new FormGroup([
},
]);
baseForm.name = "Base"
baseForm.name = "Base";
toppingsForm.name = "Toppings";
infoForm.name = "Customer Info";
// const config: ControlConfig = {
// type: "checkbox",
// name: "is-awesome",
// label: "is Awesome?",
// labelPosition: "right",
// };
// insert a control
// form.controls.push(new FormControl(config));
---
<html lang="en">
@ -115,6 +99,9 @@ infoForm.name = "Customer Info";
</head>
<body>
<h1>Pizza Form Demo</h1>
<Form showValidationHints={true} formGroups={[baseForm, toppingsForm, infoForm]} />
<Form
showValidationHints={true}
formGroups={[baseForm, toppingsForm, infoForm]}
/>
</body>
</html>

2
apps/landing-page/package.json
View file

@ -19,7 +19,7 @@
"astro-eleventy-img": "^0.5.0",
"astro-icon": "^0.7.3",
"prettier": "2.7.1",
"prettier-plugin-astro": "^0.5.5",
"prettier-plugin-astro": "^0.6.0",
"rimraf": "^3.0.2",
"tailwindcss-fluid-type": "^1.3.3"
},

1710
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

5
package.json
View file

@ -37,5 +37,8 @@
"apps/docs",
"apps/landing-page",
"packages/common"
]
],
"dependencies": {
"prettier-plugin-astro": "^0.6.0"
}
}

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

@ -3,63 +3,61 @@
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
*/
export type ControlType =
| 'text'
| 'checkbox'
| 'radio'
| 'password'
| 'button'
| 'color'
| 'date'
| 'datetime-local'
| 'email'
| 'file'
| 'hidden'
| 'image'
| 'month'
| 'number'
| 'range'
| 'search'
| 'submit'
| 'tel'
| 'time'
| 'url'
| 'week';
export type ControlConfig = ControlBase | Checkbox | Radio | Submit | Button;
| "text"
| "checkbox"
| "radio"
| "password"
| "button"
| "color"
| "date"
| "datetime-local"
| "email"
| "file"
| "hidden"
| "image"
| "month"
| "number"
| "range"
| "search"
| "submit"
| "tel"
| "time"
| "url"
| "week";
export interface ControlBase {
name: string;
id?: string;
type?: ControlType;
value?: string | number | string[];
label?: string;
labelPosition?: 'right' | 'left';
placeholder?: string;
validators?: string[]; // TODO: implement validator type
name: string;
id?: string;
type?: ControlType;
value?: string | number | string[];
label?: string;
labelPosition?: "right" | "left";
placeholder?: string;
validators?: string[]; // TODO: implement validator type
}
export interface Checkbox extends ControlBase {
type: 'checkbox';
checked: boolean;
type: "checkbox";
checked: boolean;
}
export interface Radio extends Omit<ControlBase, 'value'> {
type: 'radio';
value: string[] | RadioOption[];
export interface Radio extends Omit<ControlBase, "value"> {
type: "radio";
value: string[] | RadioOption[];
}
export interface RadioOption extends Omit<ControlBase, 'name'> {
label: string;
value: string;
checked?: boolean;
export interface RadioOption extends Omit<ControlBase, "name"> {
label: string;
value: string;
checked?: boolean;
}
export interface Submit extends ControlBase {
type: 'submit';
callBack?: () => void;
type: "submit";
callBack?: () => void;
}
export interface Button extends ControlBase {
type: 'button';
callBack?: () => void;
type: "button";
callBack?: () => void;
}

1
packages/common/types/index.ts
View file

@ -1 +1,2 @@
export * from "./control.types";
export * from "./validator.types";

9
packages/common/types/validator.types.ts Normal file
View file

@ -0,0 +1,9 @@
export type HookType = "onSubmit" | "onControlBlur" | "all";
export type ValidationResult = true | ValidationError;
export type ValidationError = {
error: string;
value: string;
limit?: number;
};

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

@ -4,16 +4,19 @@ import type { FormControl } from '../core/form-control';
export interface Props {
control: FormControl;
showValidationHints: boolean;
showErrors?: boolean;
showOnlyLabel?: boolean;
}
const { control, showValidationHints, showOnlyLabel = false } = Astro.props;
const { control, showValidationHints, showErrors = false, showOnlyLabel = false } = Astro.props;
const { validators = [] } = control;
const isRequired = showValidationHints && validators.includes('validator-required');
const isRequired: boolean = showValidationHints && validators.includes('validator-required');
const validatorAttirbutes: Record<string, string> = validators?.reduce(
const hasErrors: boolean = showValidationHints && !!control.errors?.length;
const validatorAttributes: Record<string, string> = validators?.reduce(
(prev, validator) => {
const split: string[] = validator.split(':');
const label: string = `data-${split[0]}` || 'invalid';
@ -29,7 +32,11 @@ const validatorAttirbutes: Record<string, string> = validators?.reduce(
);
---
<div class="field" data-validator-hints={showValidationHints.toString()}>
<div
class="field"
data-validator-hints={showValidationHints?.toString()}
data-validator-haserrors={hasErrors ? hasErrors?.toString() : null}
>
{
control.label && control.labelPosition === 'left' && (
<label for={control?.id ?? control.name}>
@ -45,16 +52,28 @@ const validatorAttirbutes: Record<string, string> = validators?.reduce(
name={control.name}
id={control?.id ?? control.name}
type={control.type}
value={control.value?.toString()}
value={control.value?.toString()}
checked={control.value === 'checked'}
placeholder={control.placeholder}
data-label={control.label}
data-label-position={control.labelPosition}
{...validatorAttirbutes}
data-validator-haserrors={hasErrors ? hasErrors?.toString() : null}
class:list={[{ 'has-errors': hasErrors }]}
{...validatorAttributes}
/>
)
}
{
showErrors &&
hasErrors &&
control.errors.map((error) => (
<li>
{error.error} {error.limit}
</li>
))
}
{
control.label && control.labelPosition === 'right' && (
<label for={control?.id ?? control.name}>
@ -66,8 +85,13 @@ const validatorAttirbutes: Record<string, string> = validators?.reduce(
</div>
<style>
/**
TODO: remove usage of data-validator-haserrors,
class has-errors is sufficient
*/
[data-validator-hints='true'][data-validator-haserrors='true'],
[data-validator-hints='true'] [data-validator-haserrors='true'] {
[data-validator-hints='true'] [data-validator-haserrors='true'],
.has-errors {
color: red;
border-color: red;
}

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

@ -1,4 +1,15 @@
import type { ControlConfig, ControlType, RadioOption } from 'common/types';
import type {
Button,
Checkbox,
ControlBase,
ControlType,
Radio,
RadioOption,
Submit,
ValidationError,
} from 'common/types';
export type ControlConfig = ControlBase | Checkbox | Radio | Submit | Button;
export class FormControl {
private _name = '';
@ -11,9 +22,19 @@ export class FormControl {
private _isPristine = true;
private _placeholder?: string;
private _validators?: string[];
private _errors: ValidationError[] = [];
constructor(config: ControlConfig) {
const { name, id, type, value, label, labelPosition, placeholder, validators } = config;
private validate: (value: string, validators: string[]) => ValidationError[] = (
value: string,
validators: string[]
) => {
value;
validators;
return [];
};
constructor(private config: ControlConfig) {
const { name, id, type, value, label, labelPosition, placeholder, validators = [] } = config;
this._name = name;
this._id = id ?? name;
this._type = type ?? 'text';
@ -21,7 +42,20 @@ export class FormControl {
this._label = label ?? '';
this._labelPosition = labelPosition ?? 'left';
this._placeholder = placeholder ?? '';
this._validators = validators ?? [];
this._validators = validators;
// dynamic import of the validator package
// if user did not install the validator, then errors should be empty
import('@astro-reactive/validator').then((validator) => {
if (validator) {
this.validate = validator.validate;
const valueStr: string = this._value?.toString() || '';
this._errors = this.validate(valueStr, validators);
} else {
this._errors = [];
}
});
}
get name() {
@ -56,10 +90,6 @@ export class FormControl {
return this._isPristine;
}
set isPristine(value: boolean) {
this._isPristine = value;
}
get isValid() {
return this._isValid;
}
@ -68,12 +98,21 @@ export class FormControl {
return this._validators;
}
get errors() {
return this._errors;
}
setValue(value: string) {
this._value = value;
this._isPristine = false;
this._errors = this.validate(this._value, this.config.validators || []);
}
setIsPristine(value: boolean) {
this._isPristine = value;
clearErrors() {
this._errors = [];
}
setError(error: ValidationError) {
this._errors = [...(this._errors || []), error];
}
}

3
packages/form/core/form-group.ts
View file

@ -1,5 +1,4 @@
import type { ControlConfig } from 'common/types';
import { FormControl } from './form-control';
import { ControlConfig, FormControl } from './form-control';
export class FormGroup {
controls: FormControl[];

2
packages/form/index.ts
View file

@ -1,3 +1,5 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import Form from './Form.astro';
export default Form;
export * from './core';

8
packages/form/package.json
View file

@ -30,7 +30,7 @@
"format": "prettier -w .",
"lint": "eslint . --ext .ts,.js",
"lint:fix": "eslint --fix . --ext .ts,.js",
"build": "tsc --noEmit"
"build": "astro check && tsc --noEmit"
},
"devDependencies": {
"@types/chai": "^4.3.3",
@ -43,19 +43,17 @@
"astro": "^1.5.0",
"astro-component-tester": "^0.6.0",
"chai": "^4.3.6",
"common": "file:packages/common",
"eslint": "^8.23.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"mocha": "^10.0.0",
"prettier": "^2.7.1",
"prettier-plugin-astro": "^0.5.4",
"prettier-plugin-astro": "^0.6.0",
"typescript": "^4.8.3"
},
"peerDependencies": {
"astro": "^1.5.0"
},
"dependencies": {
"common": "file:packages/common"
},
"license": "MIT"
}

27
packages/form/test/Field.astro.test.js
View file

@ -72,6 +72,33 @@ describe('Field.astro test', () => {
expect(actualResult).to.contain(expectedLabel);
expect(actualResult).to.contain('*');
});
it('Should server-render validation error attributes', async () => {
// arrange
const expectedClass = 'has-errors';
const props = {
control: {
label: 'FAKE LABEL',
name: 'username',
labelPosition: 'left',
validators: ['validator-required'],
errors: [
{
error: 'required',
},
],
value: '',
},
showValidationHints: true,
};
// act
component = await getComponentOutput('./components/Field.astro', props);
const actualResult = cleanString(component.html);
// assert
expect(actualResult).to.contain(expectedClass);
});
});
function cleanString(str) {

1
packages/form/tsconfig.json
View file

@ -1,4 +1,3 @@
{
"extends": "astro/tsconfigs/strictest",
"exclude": ["index.ts"]
}

30
packages/validator/Validator.astro
View file

@ -1,5 +1,5 @@
---
import type { HookType } from './core';
import type { HookType } from 'common/types';
export interface Props {
hook?: HookType;
@ -28,8 +28,34 @@ const { hook = 'all', displayErrorMessages = false } = Astro.props;
// const hook: HookType = (document.getElementById('hook') as HTMLInputElement).value as HookType;
const inputs = [...document.querySelectorAll('form input')] as HTMLInputElement[];
inputs?.forEach((input) => {
input.addEventListener('blur', validate);
input.addEventListener('blur', (e: Event) => {
// NOTE: event target attribute names are converted to lowercase
const element = e.target as HTMLInputElement;
const attributeNames = element?.getAttributeNames() || [];
const validators = attributeNames
.filter((attribute) => attribute.includes('data-validator-'))
.map((attribute) => {
const limit = element.getAttribute(attribute);
return `${attribute}:${limit}`;
});
const value = element.value;
const errors = validate(value, validators);
// set element hasErrors
if (errors.length) {
element.parentElement?.setAttribute('data-validator-haserrors', 'true');
element.setAttribute('data-validator-haserrors', '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');
}
});
input.addEventListener('input', clearErrors);
});
</script>

5
packages/validator/core/index.ts
View file

@ -1,3 +1,2 @@
export * from './validator.functions';
export * from './validator.types';
export * from './validators';
export * from './validator-functions';
export * from './validator-names';

93
packages/validator/core/validator.functions.ts → packages/validator/core/validator-functions.ts
View file

@ -1,28 +1,27 @@
import type { ValidationResult } from './validator.types';
import { Validators } from './validators';
import type { ValidationError } from 'common/types';
import { Validators } from './validator-names';
export function validate(event: FocusEvent) {
// NOTE: event target attribute names are converted to lowercase
const element = event.target as HTMLInputElement;
const attributeNames = element?.getAttributeNames() || [];
const validatorAttirbutes = attributeNames.filter((attribute) =>
attribute.includes('data-validator-')
);
const value = element.value;
const validityArray: ValidationResult[] = validatorAttirbutes
/**
* given the value and validators, `validate()` returns an array of errors
* @param value - value to be validated
* @param validators - names of validation logic to be applied
* @returns errors - array of errors `ValidationError`
*/
export function validate(value: string, validators: string[]): ValidationError[] {
return validators
.map((validator) => validator.replace('data-', ''))
.map((validator): ValidationResult => {
// insert logic for each validator
// TODO: implement a map of functions,validator
.map((attribute): ValidationError | null => {
// TODO: implement dynamic import of function depending on validators
const split = attribute.split(':');
const validator = split[0];
const limitStr = split[1];
const limit = parseInt(limitStr || '0', 10);
if (validator === Validators.min()) {
const limit = parseInt(element.getAttribute('data-validator-min') || '0', 10);
return validateMin(value, limit);
}
if (validator === Validators.max()) {
const limit = parseInt(element.getAttribute('data-validator-min') || '0', 10);
return validateMax(value, limit);
}
@ -39,26 +38,16 @@ export function validate(event: FocusEvent) {
}
if (validator === Validators.minLength()) {
const limit = parseInt(element.getAttribute('data-validator-minlength') || '0', 10);
return validateMinLength(value, limit);
}
if (validator === Validators.maxLength()) {
const limit = parseInt(element.getAttribute('data-validator-maxlength') || '0', 10);
return validateMaxLength(value, limit);
}
return true;
});
const errors = validityArray.filter((result) => result !== true);
// set element hasErrors
if (errors.length) {
element.parentElement?.setAttribute('data-validator-haserrors', 'true');
element.setAttribute('data-validator-haserrors', 'true');
// TODO: display error messages
}
return null;
})
.filter((result) => result !== null) as ValidationError[];
}
export function clearErrors(event: Event) {
@ -67,52 +56,62 @@ export function clearErrors(event: Event) {
element.setAttribute('data-validator-haserrors', 'false');
}
function validateMin(value: string, limit: number): ValidationResult {
function validateMin(value: string, limit: number): ValidationError | null {
const isValid = parseInt(value, 10) >= limit;
if (!isValid) {
return {
value,
error: 'min',
limit: limit,
};
}
return true;
return null;
}
function validateMax(value: string, limit: number): ValidationResult {
function validateMax(value: string, limit: number): ValidationError | null {
const isValid = parseInt(value, 10) <= limit;
if (!isValid) {
return {
value,
error: 'max',
limit: limit,
};
}
return true;
return null;
}
function validateRequired(value: string): ValidationResult {
function validateRequired(value: string): ValidationError | null {
const isValid = !!value;
if (!isValid) {
return {
value,
error: 'required',
};
}
return true;
return null;
}
function validateRequiredChecked(value: string): ValidationResult {
function validateRequiredChecked(value: string): ValidationError | null {
const isValid = value === 'checked';
if (!isValid) {
return {
value,
error: 'requiredChecked',
};
}
return true;
return null;
}
// TODO: review regexp vulnerability
function validateEmail(value: string): ValidationResult {
function validateEmail(value: string): ValidationError | null {
const isValid = String(value)
.toLowerCase()
.match(
@ -121,32 +120,38 @@ function validateEmail(value: string): ValidationResult {
if (!isValid) {
return {
value,
error: 'email',
};
}
return true;
return null;
}
function validateMinLength(value: string, limit: number): ValidationResult {
function validateMinLength(value: string, limit: number): ValidationError | null {
const isValid = value.length >= limit;
if (!isValid) {
return {
value,
error: 'minLength',
limit: limit,
};
}
return true;
return null;
}
function validateMaxLength(value: string, limit: number): ValidationResult {
function validateMaxLength(value: string, limit: number): ValidationError | null {
const isValid = value.length <= limit;
if (!isValid) {
return {
value,
error: 'minLength',
limit: limit,
};
}
return true;
return null;
}

0
packages/validator/core/validators.ts → packages/validator/core/validator-names.ts
View file

8
packages/validator/core/validator.types.ts
View file

@ -1,8 +0,0 @@
export type HookType = 'onSubmit' | 'onControlBlur' | 'all';
export type ValidationResult = true | ValidationError;
export type ValidationError = {
error: string;
limit?: number;
};

2
packages/validator/index.ts
View file

@ -1,3 +1,5 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import Validator from './Validator.astro';
export default Validator;
export * from './core';

5
packages/validator/package.json
View file

@ -27,7 +27,7 @@
"format": "prettier -w .",
"lint": "eslint . --ext .ts,.js",
"lint:fix": "eslint --fix . --ext .ts,.js",
"build": "tsc --noEmit"
"build": "astro check && tsc --noEmit"
},
"devDependencies": {
"@types/chai": "^4.3.3",
@ -40,12 +40,13 @@
"astro": "^1.5.0",
"astro-component-tester": "^0.6.0",
"chai": "^4.3.6",
"common": "file:packages/common",
"eslint": "^8.23.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"mocha": "^10.0.0",
"prettier": "^2.7.1",
"prettier-plugin-astro": "^0.5.4",
"prettier-plugin-astro": "^0.6.0",
"typescript": "^4.8.3"
},
"peerDependencies": {

1
packages/validator/tsconfig.json
View file

@ -1,4 +1,3 @@
{
"extends": "astro/tsconfigs/strictest",
"exclude": ["index.ts"]
}