Form with Validation

Validate inputs and show error messages reactively.

Live Demo

Source

HTML + JavaScript 
<div data-component="validated-form">
    <form data-validate-on="blur,submit" data-action="submit" novalidate>
        <div class="form-group">
            <label>Name</label>
            <input type="text" data-model="fullName" required minlength="2">
            <span class="error" data-error-for="fullName" style="display: none"></span>
        </div>
        <div class="form-group">
            <label>Email</label>
            <input type="email" data-model="email" required>
            <span class="error" data-error-for="email" style="display: none"></span>
        </div>
        <div class="form-group">
            <label>Age</label>
            <input type="number" data-model="age" required min="18">
            <span class="error" data-error-for="age" style="display: none"></span>
        </div>
        <button type="submit">Submit</button>
    </form>
</div>

<script>
wildflower.component('validated-form', {
    state: { fullName: '', email: '', age: '', submitted: false },
    submit() {
        this.submitted = true;
    }
});
</script>

Key Points

  • data-validate-on="blur,submit" enables validation on both blur (per-field, as you tab) and submit (whole form)
  • Options: "submit" (default), "blur", or "blur,submit" for both
  • data-error-for links error spans to their input's data-model name
  • Validation is driven by standard HTML attributes (required, minlength, type="email", min). No custom validation logic or event listeners needed
  • Avoid name as a state property; it collides with the component's built-in name. Use fullName or similar instead

Related documentation

Basic Form Handling →