Building with AI?
llms.txt
← Back to Examples

The Basics

Simple validation and error display using sf-validate and if-error directives.

Live Demo

Source Code

How It Works

  • 1.
    Add validation rules to inputs

    Use sf-validate:rule="Error message"

    Stack multiple rules: sf-validate:required sf-validate:email

  • 2.
    Show error messages

    Use if-error="field" then-show-text to display validation errors

    Add else-hide to hide when valid

  • 3.
    Style inputs on error

    Use error-class="classes" directly on inputs

Note: Use style="display:none" on error elements to hide them until the form engine loads.

Common Validation Rules

  • sf-validate:required - Field must have a value
  • sf-validate:email - Valid email format
  • sf-validate:url - Valid URL format
  • sf-validate:min[5] - Minimum value (numbers) or length (text)
  • sf-validate:max[100] - Maximum value or length

See Advanced Validation for more rules.

Documentation Reference