Merge pull request #100 from Rezact/support-native-input-errors

support native input errors
Rezact · Jan 21, 2024 · d696a9b · d696a9b
2 parents da93bf4 + b446306
commit d696a9b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rezact/rezact",
-  "version": "1.0.15-beta.47",
+  "version": "1.0.15-beta.48",
   "type": "module",
   "description": "Intuitive Reactivity, Simplified State. Embrace a modern UI framework that encourages direct data mutations, offers module-level reactivity, and simplifies component design. With Rezact, you get the power of reactivity without the boilerplate. Dive into a seamless development experience tailored for today's web.",
   "main": "index.cjs",

diff --git a/src/examples/FormValidation/FormValidation.tsx b/src/examples/FormValidation/FormValidation.tsx
@@ -7,9 +7,10 @@ type InputProps = {
   label: string;
   placeholder?: string;
   value?: string;
+  type?: string;
 };
 
-function Input({ label, placeholder, value }: InputProps) {
+function Input({ label, placeholder, value, type }: InputProps) {
   const id = label.toLowerCase();
   return (
     <>
@@ -19,6 +20,7 @@ function Input({ label, placeholder, value }: InputProps) {
         autocomplete="off"
         name={id}
         id={id}
+        type={type || "text"}
         value={value || ""}
         placeholder={placeholder || ""}
       />
@@ -204,6 +206,12 @@ const cvvInputValidationOptions: ValidatorOptions = {
   required: true,
 };
 
+const emailInput = <Input label="Email" type="email" placeholder="Email" />;
+const emailInputValidationOptions: ValidatorOptions = {
+  inputElm: emailInput[1],
+  required: true,
+};
+
 function setupInputValidators() {
   setupValidatorInput(serialNoInputValidationOptions);
   setupValidatorInput(serialNoInputValidationOptions2);
@@ -218,6 +226,7 @@ function setupInputValidators() {
   setupValidatorInput(creditCardInputValidationOptions);
   setupValidatorInput(expirationInputValidationOptions);
   setupValidatorInput(cvvInputValidationOptions);
+  setupValidatorInput(emailInputValidationOptions);
 }
 
 const handleSubmit = (ev) => {
@@ -245,6 +254,7 @@ const Form = (
     {CreditCardInput}
     {ExpirationInput}
     {CVVInput}
+    {emailInput}
 
     <input type="submit" />
   </form>

diff --git a/src/lib/rezact/validator.ts b/src/lib/rezact/validator.ts
@@ -303,6 +303,7 @@ function checkAll(formElm) {
     if (inputLengthTooLong(inputElm)) return reportLengthTooLong(inputElm);
     if (patternNotValid(inputElm)) return reportPatternNotValid(inputElm);
     if (customNotValid(inputElm)) return reportCustomNotValid(inputElm);
+    if (nativeNotValid(inputElm)) return reportNativeNotValid(inputElm);
     clearValidationError(inputElm);
   });
 }
@@ -475,6 +476,23 @@ function reportCustomNotValid(inputElm) {
   setErrorMessage(inputElm, msg);
 }
 
+function nativeNotValid(inputElm) {
+  return !inputElm.checkValidity();
+}
+
+function reportNativeNotValid(inputElm) {
+  const opts = inputElms.get(inputElm);
+  const customMsg = opts.customErrorMessages.nativeNotValid;
+  if (customMsg) return setErrorMessage(inputElm, customMsg);
+  console.log("nativeNotValid", inputElm.validationMessage);
+  if (inputElm.validationMessage)
+    return setErrorMessage(inputElm, inputElm.validationMessage, true);
+
+  const label = inputElm.labels[0]?.innerText || "This field";
+  const msg = `${label} is not valid.`;
+  setErrorMessage(inputElm, msg);
+}
+
 function openErrorElm(errorElm) {
   errorElm.style.height = errorElm.scrollHeight + "px";
 }
@@ -493,9 +511,11 @@ function clearValidationError(inputElm, skipSet = false) {
   !skipSet && setErrorMessages(errorElm);
 }
 
-function setErrorMessage(inputElm, msg) {
-  clearValidationError(inputElm, true);
-  if (inputElm.validationMessage === msg) return;
+function setErrorMessage(inputElm, msg, native = false) {
+  if (!native) {
+    clearValidationError(inputElm, true);
+    if (inputElm.validationMessage === msg) return;
+  }
 
   inputElm.classList.add("invalid");
   inputElm.setCustomValidity(msg);