better real-time onchange tracking, but need to solve showing before …

…submit event, etc.
iwsllc · Nov 9, 2023 · 1d722cf · 1d722cf
1 parent 64e01f1
commit 1d722cf
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/demo/src/samples/InvalidFeedback.tsx b/demo/src/samples/InvalidFeedback.tsx
@@ -8,11 +8,15 @@ export const Field = () => {
 	const hasError = useMemo(() => fieldErrors.field != null, [fieldErrors])
 
 	return (
-		<label className={`flex flex-row gap-4 items-center ${hasError ? 'text-error' : ''}`}>
-			Generic field:
-			<InputField name="field" required className={`input input-bordered ${hasError ? 'input-error' : ''}`} />
-			{hasError && <InvalidFeedbackLabel>{fieldErrors.field}</InvalidFeedbackLabel>}
-		</label>
+		<div className="form-control">
+			<div className="indicator">
+				<InputField name="field" required className={`input input-bordered ${hasError ? 'input-error' : ''}`} pattern="^[a-zA-Z]+$" />
+				{fieldErrors.field && <span className="indicator-item badge badge-error">{fieldErrors.field}</span>}
+			</div>
+			<label className="label">
+				<span className="label-text-alt">Required pattern:<code>^[a-zA-Z]+$</code></span>
+			</label>
+		</div>
 	)
 }
 
@@ -38,7 +42,7 @@ export const InvalidFeedbackDemo = () => {
 						<ResetButton />
 						<button type="submit" className={`btn ${success ? 'btn-success' : ''}`}>Submit</button>
 					</div>
-					<p><em>Submit with empty for error</em></p>
+					<p><em>Submit with empty or any non-alpha character for error.</em></p>
 				</div>
 			</fieldset>
 		</FieldManager>

diff --git a/forms/src/Input.tsx b/forms/src/Input.tsx
@@ -18,6 +18,7 @@ export const Input = forwardRef<Ref, InputProps>(({ onFieldError, fieldError, na
 		localSetError(undefined)
 		e.target.setCustomValidity('')
 		if (onChange != null) onChange(e)
+		if (!localRef.current.validity.valid) localSetError(localRef.current.validationMessage)
 	}
 
 	const handleInvalid = (e) => {

diff --git a/forms/src/Select.tsx b/forms/src/Select.tsx
@@ -18,6 +18,7 @@ export const Select = forwardRef<Ref, SelectProps>(({ onFieldError, onInvalid, f
 		localSetError(undefined)
 		e.target.setCustomValidity('')
 		if (onChange != null) onChange(e)
+		if (!localRef.current.validity.valid) localSetError(localRef.current.validationMessage)
 	}
 
 	const handleInvalid = (e) => {

diff --git a/forms/src/TextArea.tsx b/forms/src/TextArea.tsx
@@ -18,6 +18,7 @@ export const TextArea = forwardRef<Ref, TextAreaProps>(({ onFieldError, onInvali
 		localSetError(undefined)
 		e.target.setCustomValidity('')
 		if (onChange != null) onChange(e)
+		if (!localRef.current.validity.valid) localSetError(localRef.current.validationMessage)
 	}
 
 	const handleInvalid = (e) => {