form-validity
Advanced tools
Comparing version 0.0.3 to 0.0.4
/** | ||
* | ||
* form-validity | ||
*/ | ||
declare const symbol: unique symbol; | ||
export declare type FieldTag = 'input' | 'textarea' | 'select' | 'fieldset'; | ||
export declare type InputType = 'checkbox' | 'color' | 'date' | 'date' | 'datetime-local' | 'email' | 'fieldset' | 'file' | 'hidden' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'select' | 'tel' | 'text' | 'textarea' | 'time' | 'url' | 'week'; | ||
export declare type Field<Tag extends FieldTag = FieldTag, Type extends InputType | undefined = undefined> = (Tag extends 'input' ? Type extends 'checkbox' | 'file' | 'radio' ? Required : Type extends 'date' | 'datetime-local' | 'month' | 'time' | 'week' ? Required & Min<Date> & Max<Date> & Step : Type extends 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' ? Required & MinLength & MaxLength & Pattern : Type extends 'number' ? Required & Min<number> & Max<number> & Step : Type extends 'range' ? Min<number> & Max<number> & Step : {} : Tag extends 'select' ? Required : Tag extends 'textarea' ? Required & MinLength & MaxLength : Tag extends 'fieldset' ? Multiple<number> : unknown) & { | ||
[symbol]: Constraint<Tag>; | ||
}; | ||
export declare type Constraint<Tag extends FieldTag = FieldTag> = { | ||
declare type FieldTag = 'input' | 'textarea' | 'select' | 'fieldset'; | ||
declare type InputType = 'checkbox' | 'color' | 'date' | 'date' | 'datetime-local' | 'email' | 'fieldset' | 'file' | 'hidden' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'select' | 'tel' | 'text' | 'textarea' | 'time' | 'url' | 'week'; | ||
declare type Constraints = 'required' | 'length' | 'range:date' | 'range:number' | 'step' | 'pattern' | 'multiple'; | ||
interface Required { | ||
required(message?: string): this; | ||
} | ||
interface Range<Value> { | ||
min(value: Value | string, message?: string): this; | ||
max(value: Value | string, message?: string): this; | ||
} | ||
interface Length { | ||
minLength(number: number, message?: string): this; | ||
maxLength(number: number, message?: string): this; | ||
} | ||
interface Pattern { | ||
pattern(regexp: RegExp, message?: string): this; | ||
} | ||
interface Step { | ||
step(number: number | string, message?: string): this; | ||
} | ||
interface Multiple { | ||
multiple(): this; | ||
} | ||
declare type FieldCreator<Constraint extends Constraints> = ('required' extends Constraint ? Required : {}) & ('length' extends Constraint ? Length : {}) & ('range:date' extends Constraint ? Range<Date> : {}) & ('range:number' extends Constraint ? Range<number> : {}) & ('step' extends Constraint ? Step : {}) & ('pattern' extends Constraint ? Pattern : {}) & ('multiple' extends Constraint ? Multiple : {}); | ||
declare type FieldConfig<Tag extends FieldTag = FieldTag> = { | ||
tag: Tag; | ||
@@ -44,7 +62,16 @@ type?: { | ||
multiple?: { | ||
value: number | undefined; | ||
message: string | undefined; | ||
}; | ||
options?: string[]; | ||
value?: string; | ||
count?: number; | ||
}; | ||
/** | ||
* To hide the config from user | ||
*/ | ||
declare const symbol: unique symbol; | ||
export declare type Field<Tag extends FieldTag = FieldTag, Type extends InputType | 'default' | 'array' = 'default'> = { | ||
[symbol]: FieldConfig<Tag>; | ||
} & (Tag extends 'input' ? Type extends 'checkbox' | 'file' | 'radio' ? FieldCreator<'required'> : Type extends 'date' | 'datetime-local' | 'month' | 'time' | 'week' ? FieldCreator<'required' | 'range:date' | 'step'> : Type extends 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' ? FieldCreator<'required' | 'length' | 'pattern'> : Type extends 'number' ? FieldCreator<'required' | 'range:number' | 'step'> : Type extends 'range' ? FieldCreator<'range:number' | 'step'> : {} : Tag extends 'select' ? FieldCreator<'required'> : Tag extends 'textarea' ? FieldCreator<'required' | 'length'> : Tag extends 'fieldset' ? Type extends 'array' ? FieldCreator<'range:number'> : {} : unknown); | ||
/** | ||
* Helpers for constructing the field constraint based on the type | ||
@@ -55,10 +82,14 @@ * @see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#validation-related_attributes | ||
input: { | ||
<T extends "number" | "email" | "url">(type: T, message?: string | undefined): Field<"input", T>; | ||
<T_1 extends "textarea" | "select" | "fieldset" | "checkbox" | "color" | "date" | "datetime-local" | "file" | "hidden" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "week">(type: T_1): Field<"input", T_1>; | ||
<T extends "checkbox" | "radio">(type: T, options: string[]): Field<"input", T>; | ||
<T_1 extends "number" | "email" | "url">(type: T_1, message?: string | undefined): Field<"input", T_1>; | ||
<T_2 extends "textarea" | "select" | "fieldset" | "checkbox" | "color" | "date" | "datetime-local" | "file" | "hidden" | "month" | "password" | "radio" | "range" | "search" | "tel" | "text" | "time" | "week">(type: T_2): Field<"input", T_2>; | ||
}; | ||
select: () => Field<'select'>; | ||
textarea: () => Field<'textarea'>; | ||
fieldset: () => Field<'fieldset'>; | ||
fieldset: { | ||
(): Field<'fieldset', 'default'>; | ||
(count: number): Field<'fieldset', 'array'>; | ||
}; | ||
}; | ||
export declare function getConstraint<Tag extends FieldTag>(field: Field<Tag>): Constraint<Tag>; | ||
export declare function getFieldConfig<Tag extends FieldTag>(field: Field<Tag>): FieldConfig<Tag>; | ||
export declare function isElement<T extends HTMLElement>(element: any, tag: string): element is T; | ||
@@ -81,30 +112,3 @@ export declare function isDirty(element: unknown): boolean; | ||
}; | ||
/** | ||
* Helpers | ||
*/ | ||
interface Required { | ||
required(message?: string): this; | ||
} | ||
interface Min<Value> { | ||
min(value: Value | string, message?: string): this; | ||
} | ||
interface Max<Value> { | ||
max(value: Value | string, message?: string): this; | ||
} | ||
interface MinLength { | ||
minLength(number: number, message?: string): this; | ||
} | ||
interface MaxLength { | ||
maxLength(number: number, message?: string): this; | ||
} | ||
interface Pattern { | ||
pattern(regexp: RegExp, message?: string): this; | ||
} | ||
interface Step { | ||
step(number: number | string, message?: string): this; | ||
} | ||
interface Multiple<Count = void> { | ||
multiple(count: Count): this; | ||
} | ||
export declare function checkCustomValidity(value: FormDataEntryValue, validity: ValidityState, constraint: Constraint): string | null; | ||
export declare function checkCustomValidity(value: FormDataEntryValue, validity: ValidityState, config: FieldConfig): string | null; | ||
export {}; |
261
index.js
@@ -5,102 +5,120 @@ 'use strict'; | ||
var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js'); | ||
/** | ||
* | ||
* form-validity | ||
*/ | ||
var symbol = Symbol('constraint'); | ||
/** | ||
* To hide the config from user | ||
*/ | ||
var symbol = Symbol('form-validity'); | ||
function configureF() { | ||
function createField(tag, type, message) { | ||
var constraint = { | ||
tag | ||
}; | ||
if (type) { | ||
constraint.type = { | ||
value: type, | ||
message | ||
}; | ||
} | ||
function createField(config) { | ||
return { | ||
required(message) { | ||
constraint.required = { | ||
message | ||
}; | ||
return this; | ||
return createField(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, { | ||
required: { | ||
message | ||
} | ||
})); | ||
}, | ||
min(value, message) { | ||
constraint.min = { | ||
value, | ||
message | ||
}; | ||
return this; | ||
return createField(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, { | ||
min: { | ||
value, | ||
message | ||
} | ||
})); | ||
}, | ||
max(value, message) { | ||
constraint.max = { | ||
value, | ||
message | ||
}; | ||
return this; | ||
return createField(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, { | ||
max: { | ||
value, | ||
message | ||
} | ||
})); | ||
}, | ||
minLength(value, message) { | ||
constraint.minLength = { | ||
value, | ||
message | ||
}; | ||
return this; | ||
return createField(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, { | ||
minLength: { | ||
value, | ||
message | ||
} | ||
})); | ||
}, | ||
maxLength(value, message) { | ||
constraint.maxLength = { | ||
value, | ||
message | ||
}; | ||
return this; | ||
return createField(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, { | ||
maxLength: { | ||
value, | ||
message | ||
} | ||
})); | ||
}, | ||
pattern(value, message) { | ||
var _config$pattern; | ||
if (value.global || value.ignoreCase || value.multiline) { | ||
console.warn("global, ignoreCase, and multiline flags are not supported on the pattern attribute"); | ||
} else { | ||
var _constraint$pattern; | ||
return createField(config); | ||
} | ||
constraint.pattern = ((_constraint$pattern = constraint.pattern) !== null && _constraint$pattern !== void 0 ? _constraint$pattern : []).concat({ | ||
return createField(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, { | ||
pattern: [...((_config$pattern = config.pattern) !== null && _config$pattern !== void 0 ? _config$pattern : [])].concat({ | ||
value, | ||
message | ||
}); | ||
} | ||
return this; | ||
}) | ||
})); | ||
}, | ||
multiple(value) { | ||
constraint.multiple = { | ||
value, | ||
message | ||
}; | ||
return this; | ||
multiple(message) { | ||
return createField(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, { | ||
multiple: { | ||
message | ||
} | ||
})); | ||
}, | ||
[symbol]: constraint | ||
[symbol]: config | ||
}; | ||
} | ||
function input(type, message) { | ||
// @ts-expect-error | ||
return createField('input', type, message); | ||
function input(type, messageOrOptions) { | ||
var isCheckboxOrRadioButton = type === 'checkbox' || type === 'radio'; | ||
var message = !isCheckboxOrRadioButton && !Array.isArray(messageOrOptions) ? messageOrOptions : undefined; | ||
var options = isCheckboxOrRadioButton && Array.isArray(messageOrOptions) ? messageOrOptions : undefined; // @ts-expect-error | ||
return createField({ | ||
tag: 'input', | ||
type: { | ||
value: type, | ||
message | ||
}, | ||
options | ||
}); | ||
} | ||
function select() { | ||
return createField('select'); | ||
return createField({ | ||
tag: 'select' | ||
}); | ||
} | ||
function textarea() { | ||
return createField('textarea'); | ||
return createField({ | ||
tag: 'textarea' | ||
}); | ||
} | ||
function fieldset() { | ||
return createField('fieldset'); | ||
function fieldset(count) { | ||
return createField({ | ||
tag: 'fieldset', | ||
count | ||
}); | ||
} | ||
@@ -122,5 +140,5 @@ | ||
var f = configureF(); | ||
function getConstraint(field) { | ||
function getFieldConfig(field) { | ||
if (typeof field[symbol] === 'undefined') { | ||
throw new Error('Provided config is not a field; Please ensure only field object is used'); | ||
throw new Error('Only field object is accepted'); | ||
} | ||
@@ -217,8 +235,10 @@ | ||
if (!update) { | ||
for (var [name, field] of flatten(fieldset, f => typeof f[symbol] !== 'undefined')) { | ||
var constraint = getConstraint(field); | ||
for (var [name, field] of flattenFieldset(fieldset)) { | ||
var _checkCustomValidity; | ||
var config = getFieldConfig(field); | ||
var _value = valueByName[name]; | ||
var validity = validate(_value, constraint); | ||
var validity = validate(_value, config); | ||
var _message = checkCustomValidity(_value, validity, constraint); | ||
var _message = (_checkCustomValidity = checkCustomValidity(_value, validity, config)) !== null && _checkCustomValidity !== void 0 ? _checkCustomValidity : 'The field is invalid'; | ||
@@ -269,15 +289,22 @@ if (_message) { | ||
function flatten(item, isLeaf) { | ||
var prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ''; | ||
function flattenFieldset(item) { | ||
var _item$symbol; | ||
var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; | ||
var entries = []; | ||
var config = (_item$symbol = item[symbol]) !== null && _item$symbol !== void 0 ? _item$symbol : null; | ||
if (isLeaf(item)) { | ||
if ((config === null || config === void 0 ? void 0 : config.tag) === 'fieldset') { | ||
throw new Error('Validation based on fieldset is not supported'); | ||
} | ||
if (config) { | ||
entries.push([prefix, item]); | ||
} else if (Array.isArray(item)) { | ||
for (var i = 0; i < item.length; i++) { | ||
entries.push(...flatten(item[i], isLeaf, "".concat(prefix, "[").concat(i, "]"))); | ||
entries.push(...flattenFieldset(item[i], "".concat(prefix, "[").concat(i, "]"))); | ||
} | ||
} else { | ||
for (var [key, _value2] of Object.entries(item)) { | ||
entries.push(...flatten(_value2, isLeaf, prefix ? "".concat(prefix, ".").concat(key) : key)); | ||
entries.push(...flattenFieldset(_value2, prefix ? "".concat(prefix, ".").concat(key) : key)); | ||
} | ||
@@ -308,5 +335,11 @@ } | ||
newValue = (_pointer$_key = pointer[_key]) !== null && _pointer$_key !== void 0 ? _pointer$_key : typeof next === 'number' ? [] : {}; | ||
} | ||
} // if (typeof pointer[key] !== 'undefined') { | ||
// pointer[key] = Array.isArray(pointer[key]) | ||
// ? pointer[key].concat(newValue) | ||
// : [pointer[key], newValue]; | ||
// } else { | ||
pointer[_key] = newValue; | ||
pointer[_key] = newValue; // } | ||
pointer = pointer[_key]; | ||
@@ -319,3 +352,3 @@ } | ||
function validate(value, constraint) { | ||
function validate(value, config) { | ||
var badInput = false; | ||
@@ -333,7 +366,7 @@ var customError = false; | ||
if (value instanceof File) { | ||
var _constraint$type; | ||
var _config$type; | ||
typeMismatch = ((_constraint$type = constraint.type) === null || _constraint$type === void 0 ? void 0 : _constraint$type.value) !== 'file'; | ||
typeMismatch = ((_config$type = config.type) === null || _config$type === void 0 ? void 0 : _config$type.value) !== 'file'; | ||
} else { | ||
var _constraint$pattern$s, _constraint$pattern2, _constraint$type2, _constraint$type3; | ||
var _config$pattern$some, _config$pattern2, _config$type2, _config$type3; | ||
@@ -349,11 +382,11 @@ var isURL = value => { | ||
patternMismatch = (_constraint$pattern$s = (_constraint$pattern2 = constraint.pattern) === null || _constraint$pattern2 === void 0 ? void 0 : _constraint$pattern2.some(pattern => { | ||
patternMismatch = (_config$pattern$some = (_config$pattern2 = config.pattern) === null || _config$pattern2 === void 0 ? void 0 : _config$pattern2.some(pattern => { | ||
var match = value === null || value === void 0 ? void 0 : value.match(pattern.value); | ||
return !match || value !== match[0]; | ||
})) !== null && _constraint$pattern$s !== void 0 ? _constraint$pattern$s : false; | ||
rangeOverflow = constraint.max ? typeof value !== 'undefined' && constraint.max.value instanceof Date && new Date(value) > constraint.max.value || typeof value !== 'undefined' && typeof constraint.max.value === 'number' && Number(value) > constraint.max.value : false; | ||
rangeUnderflow = constraint.min ? constraint.min.value instanceof Date && new Date(value !== null && value !== void 0 ? value : '') < constraint.min.value || typeof constraint.min.value === 'number' && Number(value !== null && value !== void 0 ? value : '') < constraint.min.value : false; | ||
tooLong = constraint.maxLength ? typeof value !== 'undefined' && value.length > constraint.maxLength.value : false; | ||
tooShort = constraint.minLength ? typeof value === 'undefined' || value.length < constraint.minLength.value : false; | ||
typeMismatch = ((_constraint$type2 = constraint.type) === null || _constraint$type2 === void 0 ? void 0 : _constraint$type2.value) === 'email' && !/^\S+@\S+$/.test(value !== null && value !== void 0 ? value : '') || ((_constraint$type3 = constraint.type) === null || _constraint$type3 === void 0 ? void 0 : _constraint$type3.value) === 'url' && !isURL(value !== null && value !== void 0 ? value : ''); | ||
})) !== null && _config$pattern$some !== void 0 ? _config$pattern$some : false; | ||
rangeOverflow = config.max ? typeof value !== 'undefined' && config.max.value instanceof Date && new Date(value) > config.max.value || typeof value !== 'undefined' && typeof config.max.value === 'number' && Number(value) > config.max.value : false; | ||
rangeUnderflow = config.min ? config.min.value instanceof Date && new Date(value !== null && value !== void 0 ? value : '') < config.min.value || typeof config.min.value === 'number' && Number(value !== null && value !== void 0 ? value : '') < config.min.value : false; | ||
tooLong = config.maxLength ? typeof value !== 'undefined' && value.length > config.maxLength.value : false; | ||
tooShort = config.minLength ? typeof value === 'undefined' || value.length < config.minLength.value : false; | ||
typeMismatch = ((_config$type2 = config.type) === null || _config$type2 === void 0 ? void 0 : _config$type2.value) === 'email' && !/^\S+@\S+$/.test(value !== null && value !== void 0 ? value : '') || ((_config$type3 = config.type) === null || _config$type3 === void 0 ? void 0 : _config$type3.value) === 'url' && !isURL(value !== null && value !== void 0 ? value : ''); | ||
valueMissing = typeof value === 'undefined' || value === ''; | ||
@@ -377,43 +410,41 @@ } | ||
function checkCustomValidity(value, validity, constraint) { | ||
if (validity.valueMissing) { | ||
var _constraint$required$, _constraint$required; | ||
function checkCustomValidity(value, validity, config) { | ||
if (config.required && validity.valueMissing) { | ||
var _config$required$mess; | ||
return (_constraint$required$ = (_constraint$required = constraint.required) === null || _constraint$required === void 0 ? void 0 : _constraint$required.message) !== null && _constraint$required$ !== void 0 ? _constraint$required$ : null; | ||
} else if (validity.tooShort) { | ||
var _constraint$minLength, _constraint$minLength2; | ||
return (_config$required$mess = config.required.message) !== null && _config$required$mess !== void 0 ? _config$required$mess : null; | ||
} else if (config.minLength && validity.tooShort) { | ||
var _config$minLength$mes; | ||
return (_constraint$minLength = (_constraint$minLength2 = constraint.minLength) === null || _constraint$minLength2 === void 0 ? void 0 : _constraint$minLength2.message) !== null && _constraint$minLength !== void 0 ? _constraint$minLength : null; | ||
} else if (validity.tooLong) { | ||
var _constraint$maxLength, _constraint$maxLength2; | ||
return (_config$minLength$mes = config.minLength.message) !== null && _config$minLength$mes !== void 0 ? _config$minLength$mes : null; | ||
} else if (config.maxLength && validity.tooLong) { | ||
var _config$maxLength$mes; | ||
return (_constraint$maxLength = (_constraint$maxLength2 = constraint.maxLength) === null || _constraint$maxLength2 === void 0 ? void 0 : _constraint$maxLength2.message) !== null && _constraint$maxLength !== void 0 ? _constraint$maxLength : null; | ||
} else if (validity.stepMismatch) { | ||
var _constraint$step$mess, _constraint$step; | ||
return (_config$maxLength$mes = config.maxLength.message) !== null && _config$maxLength$mes !== void 0 ? _config$maxLength$mes : null; | ||
} else if (config.step && validity.stepMismatch) { | ||
var _config$step$message; | ||
return (_constraint$step$mess = (_constraint$step = constraint.step) === null || _constraint$step === void 0 ? void 0 : _constraint$step.message) !== null && _constraint$step$mess !== void 0 ? _constraint$step$mess : null; | ||
} else if (validity.rangeUnderflow) { | ||
var _constraint$min$messa, _constraint$min; | ||
return (_config$step$message = config.step.message) !== null && _config$step$message !== void 0 ? _config$step$message : null; | ||
} else if (config.min && validity.rangeUnderflow) { | ||
var _config$min$message; | ||
return (_constraint$min$messa = (_constraint$min = constraint.min) === null || _constraint$min === void 0 ? void 0 : _constraint$min.message) !== null && _constraint$min$messa !== void 0 ? _constraint$min$messa : null; | ||
} else if (validity.rangeOverflow) { | ||
var _constraint$max$messa, _constraint$max; | ||
return (_config$min$message = config.min.message) !== null && _config$min$message !== void 0 ? _config$min$message : null; | ||
} else if (config.max && validity.rangeOverflow) { | ||
var _config$max$message; | ||
return (_constraint$max$messa = (_constraint$max = constraint.max) === null || _constraint$max === void 0 ? void 0 : _constraint$max.message) !== null && _constraint$max$messa !== void 0 ? _constraint$max$messa : null; | ||
} else if (validity.typeMismatch || validity.badInput) { | ||
var _constraint$type$mess, _constraint$type4; | ||
return (_config$max$message = config.max.message) !== null && _config$max$message !== void 0 ? _config$max$message : null; | ||
} else if (config.type && (validity.typeMismatch || validity.badInput)) { | ||
var _config$type$message; | ||
return (_constraint$type$mess = (_constraint$type4 = constraint.type) === null || _constraint$type4 === void 0 ? void 0 : _constraint$type4.message) !== null && _constraint$type$mess !== void 0 ? _constraint$type$mess : null; | ||
} else if (validity.patternMismatch) { | ||
if (!constraint.pattern) { | ||
return null; | ||
} else if (constraint.pattern.length === 1) { | ||
var _constraint$pattern$; | ||
return (_config$type$message = config.type.message) !== null && _config$type$message !== void 0 ? _config$type$message : null; | ||
} else if (config.pattern && validity.patternMismatch) { | ||
var _config$pattern$find$, _config$pattern$find; | ||
return (_constraint$pattern$ = constraint.pattern[0].message) !== null && _constraint$pattern$ !== void 0 ? _constraint$pattern$ : null; | ||
} else { | ||
var _constraint$pattern$f, _constraint$pattern$f2; | ||
if (config.pattern.length === 1) { | ||
var _config$pattern$0$mes; | ||
return (_constraint$pattern$f = (_constraint$pattern$f2 = constraint.pattern.find(pattern => pattern.value.test(value))) === null || _constraint$pattern$f2 === void 0 ? void 0 : _constraint$pattern$f2.message) !== null && _constraint$pattern$f !== void 0 ? _constraint$pattern$f : null; | ||
return (_config$pattern$0$mes = config.pattern[0].message) !== null && _config$pattern$0$mes !== void 0 ? _config$pattern$0$mes : null; | ||
} | ||
return (_config$pattern$find$ = (_config$pattern$find = config.pattern.find(pattern => pattern.value.test(value))) === null || _config$pattern$find === void 0 ? void 0 : _config$pattern$find.message) !== null && _config$pattern$find$ !== void 0 ? _config$pattern$find$ : null; | ||
} else { | ||
@@ -427,4 +458,4 @@ return ''; | ||
exports.f = f; | ||
exports.getConstraint = getConstraint; | ||
exports.getDraft = getDraft; | ||
exports.getFieldConfig = getFieldConfig; | ||
exports.isDirty = isDirty; | ||
@@ -431,0 +462,0 @@ exports.isElement = isElement; |
@@ -0,101 +1,119 @@ | ||
import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js'; | ||
/** | ||
* | ||
* form-validity | ||
*/ | ||
var symbol = Symbol('constraint'); | ||
/** | ||
* To hide the config from user | ||
*/ | ||
var symbol = Symbol('form-validity'); | ||
function configureF() { | ||
function createField(tag, type, message) { | ||
var constraint = { | ||
tag | ||
}; | ||
if (type) { | ||
constraint.type = { | ||
value: type, | ||
message | ||
}; | ||
} | ||
function createField(config) { | ||
return { | ||
required(message) { | ||
constraint.required = { | ||
message | ||
}; | ||
return this; | ||
return createField(_objectSpread2(_objectSpread2({}, config), {}, { | ||
required: { | ||
message | ||
} | ||
})); | ||
}, | ||
min(value, message) { | ||
constraint.min = { | ||
value, | ||
message | ||
}; | ||
return this; | ||
return createField(_objectSpread2(_objectSpread2({}, config), {}, { | ||
min: { | ||
value, | ||
message | ||
} | ||
})); | ||
}, | ||
max(value, message) { | ||
constraint.max = { | ||
value, | ||
message | ||
}; | ||
return this; | ||
return createField(_objectSpread2(_objectSpread2({}, config), {}, { | ||
max: { | ||
value, | ||
message | ||
} | ||
})); | ||
}, | ||
minLength(value, message) { | ||
constraint.minLength = { | ||
value, | ||
message | ||
}; | ||
return this; | ||
return createField(_objectSpread2(_objectSpread2({}, config), {}, { | ||
minLength: { | ||
value, | ||
message | ||
} | ||
})); | ||
}, | ||
maxLength(value, message) { | ||
constraint.maxLength = { | ||
value, | ||
message | ||
}; | ||
return this; | ||
return createField(_objectSpread2(_objectSpread2({}, config), {}, { | ||
maxLength: { | ||
value, | ||
message | ||
} | ||
})); | ||
}, | ||
pattern(value, message) { | ||
var _config$pattern; | ||
if (value.global || value.ignoreCase || value.multiline) { | ||
console.warn("global, ignoreCase, and multiline flags are not supported on the pattern attribute"); | ||
} else { | ||
var _constraint$pattern; | ||
return createField(config); | ||
} | ||
constraint.pattern = ((_constraint$pattern = constraint.pattern) !== null && _constraint$pattern !== void 0 ? _constraint$pattern : []).concat({ | ||
return createField(_objectSpread2(_objectSpread2({}, config), {}, { | ||
pattern: [...((_config$pattern = config.pattern) !== null && _config$pattern !== void 0 ? _config$pattern : [])].concat({ | ||
value, | ||
message | ||
}); | ||
} | ||
return this; | ||
}) | ||
})); | ||
}, | ||
multiple(value) { | ||
constraint.multiple = { | ||
value, | ||
message | ||
}; | ||
return this; | ||
multiple(message) { | ||
return createField(_objectSpread2(_objectSpread2({}, config), {}, { | ||
multiple: { | ||
message | ||
} | ||
})); | ||
}, | ||
[symbol]: constraint | ||
[symbol]: config | ||
}; | ||
} | ||
function input(type, message) { | ||
// @ts-expect-error | ||
return createField('input', type, message); | ||
function input(type, messageOrOptions) { | ||
var isCheckboxOrRadioButton = type === 'checkbox' || type === 'radio'; | ||
var message = !isCheckboxOrRadioButton && !Array.isArray(messageOrOptions) ? messageOrOptions : undefined; | ||
var options = isCheckboxOrRadioButton && Array.isArray(messageOrOptions) ? messageOrOptions : undefined; // @ts-expect-error | ||
return createField({ | ||
tag: 'input', | ||
type: { | ||
value: type, | ||
message | ||
}, | ||
options | ||
}); | ||
} | ||
function select() { | ||
return createField('select'); | ||
return createField({ | ||
tag: 'select' | ||
}); | ||
} | ||
function textarea() { | ||
return createField('textarea'); | ||
return createField({ | ||
tag: 'textarea' | ||
}); | ||
} | ||
function fieldset() { | ||
return createField('fieldset'); | ||
function fieldset(count) { | ||
return createField({ | ||
tag: 'fieldset', | ||
count | ||
}); | ||
} | ||
@@ -117,5 +135,5 @@ | ||
var f = configureF(); | ||
function getConstraint(field) { | ||
function getFieldConfig(field) { | ||
if (typeof field[symbol] === 'undefined') { | ||
throw new Error('Provided config is not a field; Please ensure only field object is used'); | ||
throw new Error('Only field object is accepted'); | ||
} | ||
@@ -212,8 +230,10 @@ | ||
if (!update) { | ||
for (var [name, field] of flatten(fieldset, f => typeof f[symbol] !== 'undefined')) { | ||
var constraint = getConstraint(field); | ||
for (var [name, field] of flattenFieldset(fieldset)) { | ||
var _checkCustomValidity; | ||
var config = getFieldConfig(field); | ||
var _value = valueByName[name]; | ||
var validity = validate(_value, constraint); | ||
var validity = validate(_value, config); | ||
var _message = checkCustomValidity(_value, validity, constraint); | ||
var _message = (_checkCustomValidity = checkCustomValidity(_value, validity, config)) !== null && _checkCustomValidity !== void 0 ? _checkCustomValidity : 'The field is invalid'; | ||
@@ -264,15 +284,22 @@ if (_message) { | ||
function flatten(item, isLeaf) { | ||
var prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ''; | ||
function flattenFieldset(item) { | ||
var _item$symbol; | ||
var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; | ||
var entries = []; | ||
var config = (_item$symbol = item[symbol]) !== null && _item$symbol !== void 0 ? _item$symbol : null; | ||
if (isLeaf(item)) { | ||
if ((config === null || config === void 0 ? void 0 : config.tag) === 'fieldset') { | ||
throw new Error('Validation based on fieldset is not supported'); | ||
} | ||
if (config) { | ||
entries.push([prefix, item]); | ||
} else if (Array.isArray(item)) { | ||
for (var i = 0; i < item.length; i++) { | ||
entries.push(...flatten(item[i], isLeaf, "".concat(prefix, "[").concat(i, "]"))); | ||
entries.push(...flattenFieldset(item[i], "".concat(prefix, "[").concat(i, "]"))); | ||
} | ||
} else { | ||
for (var [key, _value2] of Object.entries(item)) { | ||
entries.push(...flatten(_value2, isLeaf, prefix ? "".concat(prefix, ".").concat(key) : key)); | ||
entries.push(...flattenFieldset(_value2, prefix ? "".concat(prefix, ".").concat(key) : key)); | ||
} | ||
@@ -303,5 +330,11 @@ } | ||
newValue = (_pointer$_key = pointer[_key]) !== null && _pointer$_key !== void 0 ? _pointer$_key : typeof next === 'number' ? [] : {}; | ||
} | ||
} // if (typeof pointer[key] !== 'undefined') { | ||
// pointer[key] = Array.isArray(pointer[key]) | ||
// ? pointer[key].concat(newValue) | ||
// : [pointer[key], newValue]; | ||
// } else { | ||
pointer[_key] = newValue; | ||
pointer[_key] = newValue; // } | ||
pointer = pointer[_key]; | ||
@@ -314,3 +347,3 @@ } | ||
function validate(value, constraint) { | ||
function validate(value, config) { | ||
var badInput = false; | ||
@@ -328,7 +361,7 @@ var customError = false; | ||
if (value instanceof File) { | ||
var _constraint$type; | ||
var _config$type; | ||
typeMismatch = ((_constraint$type = constraint.type) === null || _constraint$type === void 0 ? void 0 : _constraint$type.value) !== 'file'; | ||
typeMismatch = ((_config$type = config.type) === null || _config$type === void 0 ? void 0 : _config$type.value) !== 'file'; | ||
} else { | ||
var _constraint$pattern$s, _constraint$pattern2, _constraint$type2, _constraint$type3; | ||
var _config$pattern$some, _config$pattern2, _config$type2, _config$type3; | ||
@@ -344,11 +377,11 @@ var isURL = value => { | ||
patternMismatch = (_constraint$pattern$s = (_constraint$pattern2 = constraint.pattern) === null || _constraint$pattern2 === void 0 ? void 0 : _constraint$pattern2.some(pattern => { | ||
patternMismatch = (_config$pattern$some = (_config$pattern2 = config.pattern) === null || _config$pattern2 === void 0 ? void 0 : _config$pattern2.some(pattern => { | ||
var match = value === null || value === void 0 ? void 0 : value.match(pattern.value); | ||
return !match || value !== match[0]; | ||
})) !== null && _constraint$pattern$s !== void 0 ? _constraint$pattern$s : false; | ||
rangeOverflow = constraint.max ? typeof value !== 'undefined' && constraint.max.value instanceof Date && new Date(value) > constraint.max.value || typeof value !== 'undefined' && typeof constraint.max.value === 'number' && Number(value) > constraint.max.value : false; | ||
rangeUnderflow = constraint.min ? constraint.min.value instanceof Date && new Date(value !== null && value !== void 0 ? value : '') < constraint.min.value || typeof constraint.min.value === 'number' && Number(value !== null && value !== void 0 ? value : '') < constraint.min.value : false; | ||
tooLong = constraint.maxLength ? typeof value !== 'undefined' && value.length > constraint.maxLength.value : false; | ||
tooShort = constraint.minLength ? typeof value === 'undefined' || value.length < constraint.minLength.value : false; | ||
typeMismatch = ((_constraint$type2 = constraint.type) === null || _constraint$type2 === void 0 ? void 0 : _constraint$type2.value) === 'email' && !/^\S+@\S+$/.test(value !== null && value !== void 0 ? value : '') || ((_constraint$type3 = constraint.type) === null || _constraint$type3 === void 0 ? void 0 : _constraint$type3.value) === 'url' && !isURL(value !== null && value !== void 0 ? value : ''); | ||
})) !== null && _config$pattern$some !== void 0 ? _config$pattern$some : false; | ||
rangeOverflow = config.max ? typeof value !== 'undefined' && config.max.value instanceof Date && new Date(value) > config.max.value || typeof value !== 'undefined' && typeof config.max.value === 'number' && Number(value) > config.max.value : false; | ||
rangeUnderflow = config.min ? config.min.value instanceof Date && new Date(value !== null && value !== void 0 ? value : '') < config.min.value || typeof config.min.value === 'number' && Number(value !== null && value !== void 0 ? value : '') < config.min.value : false; | ||
tooLong = config.maxLength ? typeof value !== 'undefined' && value.length > config.maxLength.value : false; | ||
tooShort = config.minLength ? typeof value === 'undefined' || value.length < config.minLength.value : false; | ||
typeMismatch = ((_config$type2 = config.type) === null || _config$type2 === void 0 ? void 0 : _config$type2.value) === 'email' && !/^\S+@\S+$/.test(value !== null && value !== void 0 ? value : '') || ((_config$type3 = config.type) === null || _config$type3 === void 0 ? void 0 : _config$type3.value) === 'url' && !isURL(value !== null && value !== void 0 ? value : ''); | ||
valueMissing = typeof value === 'undefined' || value === ''; | ||
@@ -372,43 +405,41 @@ } | ||
function checkCustomValidity(value, validity, constraint) { | ||
if (validity.valueMissing) { | ||
var _constraint$required$, _constraint$required; | ||
function checkCustomValidity(value, validity, config) { | ||
if (config.required && validity.valueMissing) { | ||
var _config$required$mess; | ||
return (_constraint$required$ = (_constraint$required = constraint.required) === null || _constraint$required === void 0 ? void 0 : _constraint$required.message) !== null && _constraint$required$ !== void 0 ? _constraint$required$ : null; | ||
} else if (validity.tooShort) { | ||
var _constraint$minLength, _constraint$minLength2; | ||
return (_config$required$mess = config.required.message) !== null && _config$required$mess !== void 0 ? _config$required$mess : null; | ||
} else if (config.minLength && validity.tooShort) { | ||
var _config$minLength$mes; | ||
return (_constraint$minLength = (_constraint$minLength2 = constraint.minLength) === null || _constraint$minLength2 === void 0 ? void 0 : _constraint$minLength2.message) !== null && _constraint$minLength !== void 0 ? _constraint$minLength : null; | ||
} else if (validity.tooLong) { | ||
var _constraint$maxLength, _constraint$maxLength2; | ||
return (_config$minLength$mes = config.minLength.message) !== null && _config$minLength$mes !== void 0 ? _config$minLength$mes : null; | ||
} else if (config.maxLength && validity.tooLong) { | ||
var _config$maxLength$mes; | ||
return (_constraint$maxLength = (_constraint$maxLength2 = constraint.maxLength) === null || _constraint$maxLength2 === void 0 ? void 0 : _constraint$maxLength2.message) !== null && _constraint$maxLength !== void 0 ? _constraint$maxLength : null; | ||
} else if (validity.stepMismatch) { | ||
var _constraint$step$mess, _constraint$step; | ||
return (_config$maxLength$mes = config.maxLength.message) !== null && _config$maxLength$mes !== void 0 ? _config$maxLength$mes : null; | ||
} else if (config.step && validity.stepMismatch) { | ||
var _config$step$message; | ||
return (_constraint$step$mess = (_constraint$step = constraint.step) === null || _constraint$step === void 0 ? void 0 : _constraint$step.message) !== null && _constraint$step$mess !== void 0 ? _constraint$step$mess : null; | ||
} else if (validity.rangeUnderflow) { | ||
var _constraint$min$messa, _constraint$min; | ||
return (_config$step$message = config.step.message) !== null && _config$step$message !== void 0 ? _config$step$message : null; | ||
} else if (config.min && validity.rangeUnderflow) { | ||
var _config$min$message; | ||
return (_constraint$min$messa = (_constraint$min = constraint.min) === null || _constraint$min === void 0 ? void 0 : _constraint$min.message) !== null && _constraint$min$messa !== void 0 ? _constraint$min$messa : null; | ||
} else if (validity.rangeOverflow) { | ||
var _constraint$max$messa, _constraint$max; | ||
return (_config$min$message = config.min.message) !== null && _config$min$message !== void 0 ? _config$min$message : null; | ||
} else if (config.max && validity.rangeOverflow) { | ||
var _config$max$message; | ||
return (_constraint$max$messa = (_constraint$max = constraint.max) === null || _constraint$max === void 0 ? void 0 : _constraint$max.message) !== null && _constraint$max$messa !== void 0 ? _constraint$max$messa : null; | ||
} else if (validity.typeMismatch || validity.badInput) { | ||
var _constraint$type$mess, _constraint$type4; | ||
return (_config$max$message = config.max.message) !== null && _config$max$message !== void 0 ? _config$max$message : null; | ||
} else if (config.type && (validity.typeMismatch || validity.badInput)) { | ||
var _config$type$message; | ||
return (_constraint$type$mess = (_constraint$type4 = constraint.type) === null || _constraint$type4 === void 0 ? void 0 : _constraint$type4.message) !== null && _constraint$type$mess !== void 0 ? _constraint$type$mess : null; | ||
} else if (validity.patternMismatch) { | ||
if (!constraint.pattern) { | ||
return null; | ||
} else if (constraint.pattern.length === 1) { | ||
var _constraint$pattern$; | ||
return (_config$type$message = config.type.message) !== null && _config$type$message !== void 0 ? _config$type$message : null; | ||
} else if (config.pattern && validity.patternMismatch) { | ||
var _config$pattern$find$, _config$pattern$find; | ||
return (_constraint$pattern$ = constraint.pattern[0].message) !== null && _constraint$pattern$ !== void 0 ? _constraint$pattern$ : null; | ||
} else { | ||
var _constraint$pattern$f, _constraint$pattern$f2; | ||
if (config.pattern.length === 1) { | ||
var _config$pattern$0$mes; | ||
return (_constraint$pattern$f = (_constraint$pattern$f2 = constraint.pattern.find(pattern => pattern.value.test(value))) === null || _constraint$pattern$f2 === void 0 ? void 0 : _constraint$pattern$f2.message) !== null && _constraint$pattern$f !== void 0 ? _constraint$pattern$f : null; | ||
return (_config$pattern$0$mes = config.pattern[0].message) !== null && _config$pattern$0$mes !== void 0 ? _config$pattern$0$mes : null; | ||
} | ||
return (_config$pattern$find$ = (_config$pattern$find = config.pattern.find(pattern => pattern.value.test(value))) === null || _config$pattern$find === void 0 ? void 0 : _config$pattern$find.message) !== null && _config$pattern$find$ !== void 0 ? _config$pattern$find$ : null; | ||
} else { | ||
@@ -419,2 +450,2 @@ return ''; | ||
export { checkCustomValidity, draftUpdate, f, getConstraint, getDraft, isDirty, isElement, isValidationConstraintSupported, parse, shouldSkipValidate }; | ||
export { checkCustomValidity, draftUpdate, f, getDraft, getFieldConfig, isDirty, isElement, isValidationConstraintSupported, parse, shouldSkipValidate }; |
@@ -5,3 +5,3 @@ { | ||
"license": "MIT", | ||
"version": "0.0.3", | ||
"version": "0.0.4", | ||
"main": "index.js", | ||
@@ -8,0 +8,0 @@ "module": "module/index.js", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
37050
8
922
0