kilvalidate 1.0.71 → 3.0.0

package/README_NEXTJS.md

@@ -0,0 +1,90 @@
+# KilValidate for Next.js (Client Only)
+
+KilValidate is a DOM-based validator. It must run in the browser and is intended for client components. It does not use React state or form libraries internally; it reads and writes the DOM (error nodes, borders, etc.).
+
+## Install
+
+```bash
+npm i kilvalidate
+```
+
+## Quick Start (App Router)
+
+```js
+'use client';
+import React from 'react';
+import { useKilvalidate } from 'kilvalidate/kilnextvalidation-react';
+
+export default function Page() {
+  useKilvalidate();
+
+  return (
+    <form id="signup">
+      <input name="firstname" required />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+## Quick Start (Pages Router)
+
+```js
+import React, { useRef } from 'react';
+import { useKilvalidate } from 'kilvalidate/kilnextvalidation-react';
+
+export default function Page() {
+  const formRef = useRef(null);
+  useKilvalidate({ form: formRef });
+
+  return (
+    <form id="signup" ref={formRef}>
+      <input name="firstname" required />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+## Hook Options
+
+- `useKilvalidate()` attaches to all forms on the page.
+- `useKilvalidate({ form: formRef })` attaches only to a specific form.
+- `useKilvalidate({ auto: false })` disables auto-init if you want manual control.
+
+## Manual Init (No Hook)
+
+```js
+'use client';
+import kilvalidate from 'kilvalidate';
+
+export default function Page() {
+  return (
+    <form id="signup" onSubmit={(e) => kilvalidate.validateForm('#signup', e)}>
+      <input name="firstname" required />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+## React Form Libraries
+
+KilValidate can be used alongside form libraries, but it will not update React state. You can run it inside your submit handler to block submit:
+
+```js
+import kilvalidate from 'kilvalidate';
+
+function onSubmit(e) {
+  if (!kilvalidate.validateForm('#signup', e)) return;
+  // proceed with your submit
+}
+```
+
+If you need fully state-driven validation (errors as JS objects), the validator would need to be refactored to return structured error data instead of writing to the DOM. I can add that as a separate module if you want.
+
+## Notes
+
+- Use only in client components.
+- It injects CSS and writes error elements directly to the DOM.
+- You can opt out per field with `data-ignore-kilvish`.

package/kilnextvalidation-react.js

@@ -0,0 +1,42 @@
+'use client';
+
+const React = require('react');
+const { useEffect } = React;
+const kilvalidateModule = require('./kilnextvalidation.js');
+
+function getKilvalidate() {
+  return kilvalidateModule && kilvalidateModule.default ? kilvalidateModule.default : kilvalidateModule;
+}
+
+function resolveFormTarget(target) {
+  if (!target) return null;
+  if (target.current) return target.current;
+  return target;
+}
+
+function useKilvalidate(options = {}) {
+  const { form, auto = true } = options;
+
+  useEffect(() => {
+    if (!auto) return;
+    if (typeof window === 'undefined') return;
+    const api = getKilvalidate();
+    if (!api) return;
+
+    const formTarget = resolveFormTarget(form);
+    if (formTarget) {
+      api.addRealTimeValidation(formTarget);
+      api.attachInputEvents();
+      api.addAsteriskToRequiredFields();
+      api.addValidateFormToSubmitButtons();
+      api.initPasswordStrengthMeter();
+    } else {
+      api.init();
+    }
+  }, [form, auto]);
+}
+
+module.exports = {
+  useKilvalidate,
+  getKilvalidate
+};