📝 Form Validation - Real-Time Validation

Reactive form with real-time validation using computed signals

📚 What You'll Learn

✓Build reactive forms with real-time validation
✓Use computed signals for validation rules
✓Create complex validation logic (email, password strength, etc.)
✓Handle form submission with proper validation

🎮 Try It: Registration Form

Fill out the form - watch validation happen in real-time!

📝 Fill in the form

🚀 How It Works (3 Simple Steps)

Step 1: Create form data signal

const formData = createSignal({ email: '', password: '' });

Step 2: Create validation computed signals

const emailError = createComputed(() => {
  return validateEmail(formData.get().email);
});

Step 3: Auto-update on every change!

formData.set({ ...formData.get(), email: newEmail });
// emailError recalculates automatically! ✨

💻 Complete Code Example

import { createSignal, createComputed } from 'signalforge/core';
import { useSignalValue } from 'signalforge/react';
import { useState } from 'react';

function RegistrationForm() {
  const [formData] = useState(() => createSignal({
    email: '',
    password: '',
    confirmPassword: ''
  }));
  
  // Validation rules as computed signals
  const [emailError] = useState(() => createComputed(() => {
    const { email } = formData.get();
    if (!email) return '';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      return 'Invalid email format';
    }
    return '';
  }));
  
  const [passwordError] = useState(() => createComputed(() => {
    const { password } = formData.get();
    if (!password) return '';
    if (password.length < 8) {
      return 'Password must be at least 8 characters';
    }
    if (!/[A-Z]/.test(password)) {
      return 'Must contain uppercase letter';
    }
    if (!/[0-9]/.test(password)) {
      return 'Must contain a number';
    }
    return '';
  }));
  
  const [isFormValid] = useState(() => createComputed(() => {
    const data = formData.get();
    return data.email && data.password && 
           !emailErrorValue && !passwordErrorValue;
  }));
  
  const emailErrorValue = useSignalValue(emailError);
  const isFormValidValue = useSignalValue(isFormValid);
  
  return (
    <form>
      <input 
        value={formData.get().email}
        onChange={(e) => formData.set({
          ...formData.get(), 
          email: e.target.value 
        })}
      />
      {emailErrorValue && <p>{emailErrorValue}</p>}
      
      <button disabled={!isFormValidValue}>
        Submit
      </button>
    </form>
  );
}

// ✨ Benefits:
// • Real-time validation as user types
// • No manual validation calls needed
// • Clean, declarative code
// • Automatic dependency tracking

🌍 Real-World Use Cases

📧 Login Forms

Validate email and password requirements

✍️ Registration

Check username availability, password strength

💳 Checkout Forms

Validate credit card, address, postal codes

📝 Survey Forms

Required fields, conditional validation

💡 Best Practices

✅

Use computed signals for validation

Keep validation logic separate and reusable.

⚡

Validate as user types

Give immediate feedback for better UX.

🎯

Show errors only after interaction

Don't overwhelm users with errors on empty fields.

🔒

Disable submit until valid

Prevent form submission with invalid data.

🎓 Next Steps

Master form validation? Try these demos:

Computed Signals →Persistent Forms →Effects →