Wichige änderung an DB

src/components/ui/Input.tsx

@@ -7,7 +7,17 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, label, error, ...props }, ref) => {
+  ({ className, type, label, error, onInvalid, ...props }, ref) => {
+    // Default English validation message
+    const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
+      e.target.setCustomValidity('Please fill out this field.');
+      if (onInvalid) onInvalid(e);
+    };
+
+    const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+      e.currentTarget.setCustomValidity('');
+    };
+
     return (
       <div className="space-y-1">
         {label && (
@@ -23,6 +33,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             className
           )}
           ref={ref}
+          onInvalid={handleInvalid}
+          onInput={handleInput}
           {...props}
         />
         {error && (