@conform-to/dom - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0-pre.0

index.d.ts

@@ -9,3 +9,3 @@ export declare type Primitive = null | undefined | string | number | boolean | Date;
 }
-export declare type FieldValue<Schema> = Schema extends Primitive | File ? string : Schema extends Array<infer InnerType> ? Array<FieldValue<InnerType>> : Schema extends Record<string, any> ? {
+export declare type FieldValue<Schema> = Schema extends Primitive ? string : Schema extends File ? File : Schema extends Array<infer InnerType> ? Array<FieldValue<InnerType>> : Schema extends Record<string, any> ? {
     [Key in keyof Schema]?: FieldValue<Schema[Key]>;
@@ -39,3 +39,3 @@ } : unknown;
 export declare function hasError(error: Array<[string, string]>, name?: string): boolean;
-export declare function setFormError(form: HTMLFormElement, submission: Submission): void;
+export declare function reportSubmission(form: HTMLFormElement, submission: Submission): void;
 export declare function setValue<T>(target: any, paths: Array<string | number>, valueFn: (prev?: T) => T): void;
@@ -42,0 +42,0 @@ export declare function requestSubmit(form: HTMLFormElement, submitter?: HTMLButtonElement | HTMLInputElement): void;

index.js

@@ -56,12 +56,44 @@ 'use strict';
 }
-function setFormError(form, submission) {
-  var firstErrorByName = Object.fromEntries([...submission.error].reverse());
+function reportSubmission(form, submission) {
+  var messageByName = new Map();
+  var nameByInput = new Map();
+  for (var [name, message] of submission.error) {
+    if (!messageByName.has(name)) {
+      // Only keep the first error message (for now)
+      messageByName.set(name, message);
+
+      // We can't use empty string as button name
+      // As `form.element.namedItem('')` will always returns null
+      var elementName = name ? name : '__form__';
+      var item = form.elements.namedItem(elementName);
+      if (item instanceof RadioNodeList) {
+        throw new Error('Repeated field name is not supported');
+      }
+      if (item === null) {
+        // Create placeholder button to keep the error without contributing to the form data
+        var button = document.createElement('button');
+        button.name = elementName;
+        button.hidden = true;
+        button.dataset.conformTouched = 'true';
+        item = button;
+        form.appendChild(button);
+      }
+      nameByInput.set(item, name);
+    }
+  }
   for (var element of form.elements) {
-    if (isFieldElement(element)) {
-      var error = firstErrorByName[element.name];
-      if (typeof error !== 'undefined' || shouldValidate(submission, element.name)) {
-        element.setCustomValidity(error !== null && error !== void 0 ? error : '');
+    if (isFieldElement(element) && element.willValidate) {
+      var _nameByInput$get;
+      var _name = (_nameByInput$get = nameByInput.get(element)) !== null && _nameByInput$get !== void 0 ? _nameByInput$get : element.name;
+      var _message = messageByName.get(_name);
+      if (typeof _message !== 'undefined' || shouldValidate(submission, _name)) {
+        var invalidEvent = new Event('invalid', {
+          cancelable: true
+        });
+        element.setCustomValidity(_message !== null && _message !== void 0 ? _message : '');
+        element.dispatchEvent(invalidEvent);
       }
     }
   }
+  focusFirstInvalidField(form);
 }
@@ -154,6 +186,9 @@ function setValue(target, paths, valueFn) {
         setValue(submission.value, paths, prev => {
-          if (prev) {
-            throw new Error('Entry with the same name is not supported');
+          if (!prev) {
+            return value;
+          } else if (Array.isArray(prev)) {
+            return prev.concat(value);
+          } else {
+            return [prev, value];
           }
-          return value;
         });
@@ -242,7 +277,7 @@ }
 exports.parseListCommand = parseListCommand;
+exports.reportSubmission = reportSubmission;
 exports.requestSubmit = requestSubmit;
 exports.requestValidate = requestValidate;
-exports.setFormError = setFormError;
 exports.setValue = setValue;
 exports.shouldValidate = shouldValidate;
 exports.updateList = updateList;

module/index.js

@@ -52,12 +52,44 @@ import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
 }
-function setFormError(form, submission) {
-  var firstErrorByName = Object.fromEntries([...submission.error].reverse());
+function reportSubmission(form, submission) {
+  var messageByName = new Map();
+  var nameByInput = new Map();
+  for (var [name, message] of submission.error) {
+    if (!messageByName.has(name)) {
+      // Only keep the first error message (for now)
+      messageByName.set(name, message);
+
+      // We can't use empty string as button name
+      // As `form.element.namedItem('')` will always returns null
+      var elementName = name ? name : '__form__';
+      var item = form.elements.namedItem(elementName);
+      if (item instanceof RadioNodeList) {
+        throw new Error('Repeated field name is not supported');
+      }
+      if (item === null) {
+        // Create placeholder button to keep the error without contributing to the form data
+        var button = document.createElement('button');
+        button.name = elementName;
+        button.hidden = true;
+        button.dataset.conformTouched = 'true';
+        item = button;
+        form.appendChild(button);
+      }
+      nameByInput.set(item, name);
+    }
+  }
   for (var element of form.elements) {
-    if (isFieldElement(element)) {
-      var error = firstErrorByName[element.name];
-      if (typeof error !== 'undefined' || shouldValidate(submission, element.name)) {
-        element.setCustomValidity(error !== null && error !== void 0 ? error : '');
+    if (isFieldElement(element) && element.willValidate) {
+      var _nameByInput$get;
+      var _name = (_nameByInput$get = nameByInput.get(element)) !== null && _nameByInput$get !== void 0 ? _nameByInput$get : element.name;
+      var _message = messageByName.get(_name);
+      if (typeof _message !== 'undefined' || shouldValidate(submission, _name)) {
+        var invalidEvent = new Event('invalid', {
+          cancelable: true
+        });
+        element.setCustomValidity(_message !== null && _message !== void 0 ? _message : '');
+        element.dispatchEvent(invalidEvent);
       }
     }
   }
+  focusFirstInvalidField(form);
 }
@@ -150,6 +182,9 @@ function setValue(target, paths, valueFn) {
         setValue(submission.value, paths, prev => {
-          if (prev) {
-            throw new Error('Entry with the same name is not supported');
+          if (!prev) {
+            return value;
+          } else if (Array.isArray(prev)) {
+            return prev.concat(value);
+          } else {
+            return [prev, value];
           }
-          return value;
         });
@@ -226,2 +261,2 @@ }
 
-export { focusFirstInvalidField, getFormData, getFormElement, getFormElements, getName, getPaths, getSubmissionType, handleList, hasError, isFieldElement, parse, parseListCommand, requestSubmit, requestValidate, setFormError, setValue, shouldValidate, updateList };
+export { focusFirstInvalidField, getFormData, getFormElement, getFormElements, getName, getPaths, getSubmissionType, handleList, hasError, isFieldElement, parse, parseListCommand, reportSubmission, requestSubmit, requestValidate, setValue, shouldValidate, updateList };

package.json

@@ -5,3 +5,3 @@ {
 	"license": "MIT",
-	"version": "0.4.1",
+	"version": "0.5.0-pre.0",
 	"main": "index.js",
@@ -8,0 +8,0 @@ "module": "module/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26774

increased by11.22%

Lines of code

689

increased by10.95%

No dependency changes