@cocreate/validation 1.19.0 → 2.0.0

package/src/messages.js

@@ -0,0 +1,43 @@
+import { render } from "@cocreate/render";
+import "@cocreate/element-prototype";
+
+export function errorTargets(element) {
+    const root = element.getRootNode();
+    return (element.getAttribute("aria-errormessage") || "")
+        .trim().split(/\s+/).filter(Boolean)
+        .map(id => root.getElementById?.(id)).filter(Boolean);
+}
+
+export function clearError(element) {
+    for (const target of errorTargets(element)) {
+        target.setValue("");
+        target.hidden = true;
+    }
+}
+
+export function renderErrors({ data }) {
+    const shown = new Set();
+    const notifications = [];
+    for (const error of data) {
+        const unlinked = [];
+        for (const element of error.elements || []) {
+            if (shown.has(element)) continue;
+            shown.add(element);
+            const targets = errorTargets(element);
+            if (!targets.length) {
+                unlinked.push(element);
+                continue;
+            }
+            for (const target of targets) {
+                target.setValue(error.message);
+                target.hidden = false;
+            }
+        }
+        if (!error.elements?.length || unlinked.length) {
+            notifications.push({ ...error, elements: unlinked });
+        }
+    }
+    if (notifications.length) {
+        render({ selector: '[template~="notification"]', data: notifications });
+    }
+}

package/src/validations/matches.js

@@ -1,9 +1,9 @@
-import { render } from '@cocreate/render';
+import { renderErrors } from "../messages.js";
 
 function initMatches() {
-    let elements = document.querySelectorAll('[matches]');
+    let elements = document.querySelectorAll('[match-query]');
     for (let element of elements) {
-        let targetSelector = element.getAttribute('matches');
+        let targetSelector = element.getAttribute('match-query');
         let target = document.querySelector(targetSelector);
         element.validations = { matches: target };
         element.addEventListener('input', validateMatchEvent);
@@ -15,35 +15,37 @@ function validateMatchEvent(e) {
 }
 
 function validateMatch(element) {
-    // let element = e.target;
-    let target = element.validations.matches;
+    let target = element.queryElements();
+    if (!target) {
+        element.setAttribute('match', 'false');
+        return;
+    }
     if (target.value == element.value) {
-        target.setAttribute('validation', 'true');
-        element.setAttribute('validation', 'true');
+        element.setAttribute('match', 'true');
     }
     else {
-        target.setAttribute('validation', 'false');
-        element.setAttribute('validation', 'false');
+        element.setAttribute('match', 'false');
     }
 }
 
-function matches(elements) {
+function matches(elements, report = renderErrors) {
     let failedElements = [];
     for (let element of elements) {
-        let isValid = element.getAttribute('validation');
+        validateMatch(element);
+        let isValid = element.getAttribute('match');
         if (isValid == 'false') {
             failedElements.push(element);
         }
     }
     if (failedElements.length) {
-        render({
-            selector: "[template*='validate']",
+        report({
+            selector: '[template~="notification"]',
             data: [{
                 type: 'matches',
-                status: 'failed',
+                status: 'error',
+                success: false,
                 message: 'One or more values do not match',
-                selector: '[matches][validation="false"]',
-                elements: failedElements
+                selector: '[match-query][match="false"]'
             }]
         });
         return failedElements;

package/src/validations/value.js

@@ -0,0 +1,32 @@
+import { renderErrors } from "../messages.js";
+
+export async function value(elements, report = renderErrors) {
+	const failedElements = [];
+	for (const element of elements) {
+		try {
+			const resolvedValue = await element.getValue();
+			if (
+				resolvedValue === null ||
+				typeof resolvedValue !== "object" ||
+				Array.isArray(resolvedValue)
+			) {
+				failedElements.push(element);
+			}
+		} catch {
+			failedElements.push(element);
+		}
+	}
+
+	if (failedElements.length) {
+		report({
+			data: failedElements.map((element) => ({
+				type: "validate",
+				status: "error",
+				success: false,
+				message: "Value must resolve to an object.",
+				elements: [element]
+			}))
+		});
+		return failedElements;
+	}
+}

package/test/required-value.test.cjs

@@ -0,0 +1,89 @@
+const assert = require('node:assert/strict');
+const { readFileSync } = require('node:fs');
+const { join } = require('node:path');
+const vm = require('node:vm');
+const test = require('node:test');
+
+async function validateRequired(resolvedValue, options = {}) {
+    const result = { aborted: false, continued: false, errors: [] };
+    const attributes = new Map([['required', '']]);
+    const field = {
+        value: '$query(#cluster-object-id).getValue()',
+        willValidate: true,
+        validationMessage: '',
+        hasAttribute: name => attributes.has(name),
+        setAttribute: (name, value) => attributes.set(name, value),
+        closest: () => null,
+        matches: selector => selector === ':disabled' && !!options.disabled,
+        checkValidity: () => options.nativeValid !== false,
+        getValue: async () => {
+            if (options.failure) throw options.failure;
+            return resolvedValue;
+        }
+    };
+    const form = {
+        noValidate: options.noValidate,
+        matches: () => false,
+        querySelectorAll: () => [],
+        elements: [field]
+    };
+    const action = {
+        form,
+        element: {},
+        abort: () => { result.aborted = true; },
+        end: () => { result.continued = true; }
+    };
+    const source = readFileSync(join(__dirname, '../src/index.js'), 'utf8');
+    const code = source.slice(source.indexOf('const validations'), source.indexOf('actions.init('));
+    const context = vm.createContext({
+        action, matches() {}, unique() {}, value() {}, clearError() {},
+        errorTargets: () => [],
+        renderErrors: ({ data }) => result.errors.push(...data),
+        render: ({ data }) => result.errors.push(...data)
+    });
+    await vm.runInContext(`${code}\nvalidate(action);`, context);
+    result.invalid = attributes.get('aria-invalid');
+    return result;
+}
+
+test('required validates the resolved value even when the raw expression is nonempty', async t => {
+    for (const value of ['', null, undefined, []]) {
+        await t.test(String(value), async () => {
+            const result = await validateRequired(value);
+            assert.equal(result.aborted, true);
+            assert.equal(result.continued, false);
+            assert.equal(result.invalid, 'true');
+            assert.equal(result.errors[0].message, 'A value is required.');
+        });
+    }
+});
+
+test('valid resolved values retain normal required semantics', async t => {
+    for (const value of ['65f8cb447b39a3c1a8904e22', 0, false, ['selected']]) {
+        await t.test(String(value), async () => {
+            const result = await validateRequired(value);
+            assert.equal(result.aborted, false);
+            assert.equal(result.continued, true);
+            assert.equal(result.invalid, 'false');
+        });
+    }
+});
+
+test('native constraint failures still abort even when the resolved value is present', async () => {
+    assert.equal((await validateRequired('value', { nativeValid: false })).aborted, true);
+});
+
+test('a rejected value lookup aborts validation', async () => {
+    const result = await validateRequired(null, { failure: new Error('Lookup failed') });
+    assert.equal(result.aborted, true);
+    assert.equal(result.continued, false);
+    assert.equal(result.errors[0].message, 'Lookup failed');
+});
+
+test('disabled fields and forms opting out of native validation retain their behavior', async () => {
+    for (const options of [{ disabled: true }, { noValidate: true }]) {
+        const result = await validateRequired('', options);
+        assert.equal(result.aborted, false);
+        assert.equal(result.continued, true);
+    }
+});

package/src/validations/email.js

@@ -1,31 +0,0 @@
-import { render } from '@cocreate/render';
-
-export var email = async (elements) => {
-    let failedElements = [];
-    for (let element of elements) {
-        let length = element.getAttribute('length') || 0
-        length = parseFloat(length)
-        let value = await element.getValue();
-        let isValidEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(value);
-
-        if (isValidEmail) {
-            element.setAttribute('validation', 'true');
-        } else {
-            element.setAttribute('validation', 'false');
-            failedElements.push(element);
-        }
-    }
-    if (failedElements.length) {
-        render({
-            selector: "[template*='validate']",
-            data: [{
-                type: 'email',
-                status: 'failed',
-                message: 'Please enter a valid email address',
-                selector: '[required][validation="false"]',
-                elements: failedElements
-            }]
-        });
-        return failedElements;
-    }
-};

package/src/validations/length.js

@@ -1,31 +0,0 @@
-import { render } from '@cocreate/render';
-
-export var length = async (elements) => {
-    let failedElements = [];
-    for (let element of elements) {
-        let length = element.getAttribute('length') || 0
-        length = parseFloat(length)
-        let value = await element.getValue();
-        if (element.type === 'password')
-            value = atob(value)
-        if (value.length >= length) {
-            element.setAttribute('validation', 'true');
-        } else {
-            element.setAttribute('validation', 'false');
-            failedElements.push(element);
-        }
-    }
-    if (failedElements.length) {
-        render({
-            selector: "[template*='validate']",
-            data: [{
-                type: 'length',
-                status: 'failed',
-                message: 'Does not meet the minimum character length requirement',
-                selector: '[required][validation="false"]',
-                elements: failedElements
-            }]
-        });
-        return failedElements;
-    }
-};

package/src/validations/required.js

@@ -1,29 +0,0 @@
-// import {validations} from '../index.js';
-import { render } from '@cocreate/render';
-
-
-export var required = async (elements) => {
-    let failedElements = [];
-    for (let element of elements) {
-        let value = await element.getValue();
-        if (value || value === 0 || (value === false && element.type !== 'checkbox')) {
-            element.setAttribute('validation', 'true');
-        } else {
-            element.setAttribute('validation', 'false');
-            failedElements.push(element);
-        }
-    }
-    if (failedElements.length) {
-        render({
-            selector: "[template*='validate']",
-            data: [{
-                type: 'unique',
-                status: 'failed',
-                message: 'One or more required fields are missing values',
-                selector: '[required][validation="false"]',
-                elements: failedElements
-            }]
-        });
-        return failedElements;
-    }
-};

package/src/validations/subdomain.js

@@ -1,65 +0,0 @@
-import { render } from '@cocreate/render';
-
-function initSubdomain() {
-    let elements = document.querySelectorAll('[subdomain]');
-    for (let element of elements) {
-        element.addEventListener('input', validateSubdomainEvent);
-    }
-}
-
-function validateSubdomainEvent(e) {
-    validateSubdomain(e.target);
-}
-
-async function validateSubdomain(element) {
-    let subdomain = await element.getValue();
-    let validation = 'false';
-    if (Array.isArray(subdomain))
-        subdomain = subdomain[0]
-    let array = subdomain.split('.');
-    if (array.length - 1 == 2) {
-        validation = 'true';
-    }
-
-    const pattern = /^[a-z0-9][a-z0-9\-]*[a-z0-9]$/;
-    if (validation != 'false' && pattern.test(array[0])) {
-        validation = 'true';
-    }
-    else
-        validation = 'false';
-    // let array = subdomain.split('.').length -1;
-    // if (validation && array == 2){
-    //     validation = 'true';
-    // }
-
-    element.setAttribute('validation', validation);
-    return validation;
-}
-
-function subdomain(elements) {
-    let failedElements = [];
-    for (let element of elements) {
-        // let isValid = element.getAttribute('subdomain');
-        let isValid = validateSubdomain(element);
-        if (isValid == 'false') {
-            failedElements.push(element);
-        }
-    }
-    if (failedElements.length) {
-        render({
-            selector: "[template*='validate']",
-            data: [{
-                type: 'subdomain',
-                status: 'failed',
-                message: 'Enter a valid subdomain. subdomain can only be one level.',
-                selector: '[subdomain][validation="false"]',
-                elements: failedElements
-            }]
-        });
-        return failedElements;
-    }
-}
-
-initSubdomain();
-
-export { subdomain };

package/src/validations/unique.js

@@ -1,26 +0,0 @@
-import { render } from '@cocreate/render';
-
-export const unique = async (elements) => {
-    let failedElements = [];
-    for (let element of elements) {
-        let unique = element.getAttribute('unique');
-        if (unique === '')
-            unique = await CoCreate.unique.isUnique(element)
-        if (unique === 'false' || unique === false) {
-            failedElements.push(element);
-        }
-    }
-    if (failedElements.length) {
-        render({
-            selector: "[template*='validate']",
-            data: [{
-                type: 'unique',
-                status: 'failed',
-                message: 'One or more values are not unique',
-                selector: '[unique="false"]',
-                elements: failedElements
-            }]
-        });
-        return failedElements;
-    }
-};