[breaking] To not attempt to extract input value, pass element directly.

README.md

@@ -29,8 +29,8 @@ const ok = new Ok({
         fn: val => val === "Dave"
     },
     emailDe: {
-        msg: (val) => `Please input your .de email (You entered '${val}')`,
-        fn: (val, element, e) => val.endsWith(".de")
+        msg: (element) => `Please input your .de email (You entered '${element.value}')`,
+        fn: (element, e) => element.value.endsWith(".de")
     }
 });
 
@@ -86,11 +86,11 @@ import { Ok } from "okjs";
 const ok = new Ok({
     nameCaps: {
         msg: "Must be in all caps",
-        fn: val => val.toUpperCase() === val
+        fn: (element) => element.value.toUpperCase() === element.value
     },
     emailDe: {
         msg: "Must end with '.de'",
-        fn: val => /.+\.de$/i.test(val)
+        fn: (element) => /.+\.de$/i.test(element.value)
     }
 });
 ```

demo/index.html

@@ -72,11 +72,11 @@ <h1>Demo 1 - Basic Inputs</h1>
             const ok = new Ok({
                 nameFirst: {
                     msg: "Only 'Dave' allowed",
-                    fn: (val) => val === "Dave"
+                    fn: (element) => element.value === "Dave"
                 },
                 emailDe: {
-                    msg: (val) => `Please input your .de email (You entered '${val}')`,
-                    fn: (val) => val.endsWith(".de")
+                    msg: (element) => `Please input your .de email (You entered '${element.value}')`,
+                    fn: (element) => element.value.endsWith(".de")
                 }
             });
 
@@ -108,6 +108,10 @@ <h1>Demo 2 - Advanced Inputs</h1>
                 <textarea id="demo2_msg" placeholder="Your message"
                           data-ok="message" required></textarea>
             </div>
+            <div class="form-group">
+                <label for="demo2_file">File (Name must contain he letter 'a')</label>
+                <input type="file" id="demo2_file" data-ok="filenameLetter" required>
+            </div>
             <div class="form-group">
                 <p>Communication Mode (Phone is broken right now!)</p>
                 <input type="radio" id="demo2_contactChoice1"
@@ -132,27 +136,31 @@ <h1>Demo 2 - Advanced Inputs</h1>
             const ok = new Ok({
                 nameFirst: {
                     msg: "Name must start with 'D'",
-                    fn: (val) => val.toLowerCase().startsWith("d")
+                    fn: (element) => element.value.toLowerCase().startsWith("d")
                 },
                 uppercase: {
                     msg: "Value must be all-uppercase",
-                    fn: (val) => val.toUpperCase() === val
+                    fn: (element) => element.value.toUpperCase() === element.value
                 },
                 nameLast: {
-                    msg: "Only 'Bar-Dave' may select 'Bar'",
-                    fn: (val) => val !== "bar"
+                    msg: "Bar is not possible!",
+                    fn: (element) => element.value !== "bar"
                 },
                 message: {
-                    msg: (val) => `Please enter an even number of characters (You entered ${val.length})`,
-                    fn: (val) => val.length % 2 === 0
+                    msg: (element) => `Please enter an even number of characters (You entered ${element.value.length})`,
+                    fn: (element) => element.value.length % 2 === 0
+                },
+                filenameLetter: {
+                    msg: () => "File name must contain the letter 'a'",
+                    fn: (element) => element.files[0].name.includes("a")
                 },
                 radioPhone: {
                     msg: () => "Sorry, Phone communication is not allowed here. (Why do we even allow checking this? I dunno)",
-                    fn: (checked) => !checked
+                    fn: (element) => !element.checked
                 },
-                pleaseCheckMe:{
+                pleaseCheckMe: {
                     msg: () => "Please check this box!!!",
-                    fn: (checked) => checked
+                    fn: (element) => element.checked
                 }
             });
 
@@ -186,7 +194,7 @@ <h1>Demo 3 - Message customization</h1>
             const ok = new Ok({
                 nameFirst: {
                     msg: () => getLocalizedStringDummy("validator.dave"),
-                    fn: (val) => val === "Dave"
+                    fn: (element) => element.value === "Dave"
                 }
             });
 

src/Ok.ts

@@ -1,7 +1,6 @@
 import type { Validator } from "./validator/Validator";
 import type { ValidatorDictionary } from "./validator/ValidatorDictionary";
 import type { ValidatableElement } from "./dom/ValidatableElement";
-import { getValidatableElementValue } from "./dom/ValidatableElement";
 
 /**
  * @internal
@@ -36,12 +35,11 @@ export class Ok {
      * @returns validity of the element.
      */
     private validate(element: ValidatableElement, e?: Event): boolean {
-        const value = getValidatableElementValue(element);
         for (const validator of this.getValidators(element)) {
-            if (!validator.fn(value, element, e)) {
+            if (!validator.fn(element, e)) {
                 const msg =
                     typeof validator.msg === "function"
-                        ? validator.msg(value, element, e)
+                        ? validator.msg(element, e)
                         : validator.msg;
                 element.setCustomValidity(msg);
                 return false;

src/dom/ValidatableElement.ts

@@ -11,27 +11,3 @@ export type ValidatableElement =
     | HTMLInputElement
     | HTMLTextAreaElement
     | HTMLSelectElement;
-
-/**
- * @internal
- */
-export type ValidatableElementValue = string | boolean;
-
-/**
- * Returns element specific value. Usually this is a string, but can have other values such as a boolean for checkboxes.
- *
- * @internal
- * @param element ValidatableElement to get the value of.
- * @returns value of the element.
- */
-export const getValidatableElementValue = (
-    element: ValidatableElement
-): ValidatableElementValue => {
-    if (
-        element instanceof HTMLInputElement &&
-        (element.type === "checkbox" || element.type === "radio")
-    ) {
-        return element.checked;
-    }
-    return element.value;
-};

src/validator/Validator.ts

@@ -1,7 +1,4 @@
-import type {
-    ValidatableElement,
-    ValidatableElementValue,
-} from "../dom/ValidatableElement";
+import type { ValidatableElement } from "../dom/ValidatableElement";
 
 /**
  * A function which takes the input value of an element and the element itself.
@@ -10,39 +7,35 @@ import type {
  */
 type ValidatableElementFunction<
     TResult,
-    UElement extends ValidatableElement,
-    VElementValue extends ValidatableElementValue
-> = (val: VElementValue, element: UElement, e?: Event) => TResult;
+    UElement extends ValidatableElement
+> = (element: UElement, e?: Event) => TResult;
 
 /**
  * Function that returns a validation message.
  *
  * @public
  */
 type ValidationMessageFunction<
-    UElement extends ValidatableElement,
-    VElementValue extends ValidatableElementValue
-> = ValidatableElementFunction<string, UElement, VElementValue>;
+    UElement extends ValidatableElement
+> = ValidatableElementFunction<string, UElement>;
 
 /**
  * Function that checks if the element value is valid.
  *
  * @public
  */
 type ValidatorFunction<
-    UElement extends ValidatableElement,
-    VElementValue extends ValidatableElementValue
-> = ValidatableElementFunction<boolean, UElement, VElementValue>;
+    UElement extends ValidatableElement
+> = ValidatableElementFunction<boolean, UElement>;
 
 /**
  * Interface for a single validator.
  *
  * @public
  */
 export interface Validator<
-    UElement extends ValidatableElement = ValidatableElement,
-    VElementValue extends ValidatableElementValue = ValidatableElementValue
+    UElement extends ValidatableElement = ValidatableElement
 > {
-    fn: ValidatorFunction<UElement, VElementValue>;
-    msg: string | ValidationMessageFunction<UElement, VElementValue>;
+    fn: ValidatorFunction<UElement>;
+    msg: string | ValidationMessageFunction<UElement>;
 }