Django Validator Component

Validator wraps a form field and its label to apply daisyUI validation styling based on field state. Use it with Django's form error handling to show success and error visuals inline.

Basic Validator

Preview

Enter a valid email address

Code

<c-lb.fieldset legend="Email">
  <c-lb.input validate type="email" required placeholder="[email protected]" />
  <c-lb.validator.hint>Enter a valid email address</c-lb.validator.hint>
</c-lb.fieldset>

Password Validation

Preview

Password

Must be more than 8 characters, including uppercase, lowercase, and a number

Code

<c-lb.fieldset legend="Password" class="w-52">
  <c-lb.input validate type="password" required placeholder="Password" minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must have 8+ chars, uppercase, lowercase, number" />
  <c-lb.validator.hint>Must be more than 8 characters, including uppercase, lowercase, and a number</c-lb.validator.hint>
</c-lb.fieldset>

Select Validation

Preview

Country

Please select a country

Code

<c-lb.fieldset legend="Country">
  <c-lb.select validate class="w-56" required>
    <option disabled selected value="">Pick a country</option>
    <option>United States</option>
    <option>United Kingdom</option>
    <option>Canada</option>
  </c-lb.select>
  <c-lb.validator.hint>Please select a country</c-lb.validator.hint>
</c-lb.fieldset>

Checkbox Validation

Preview

I accept the terms and conditions

You must accept the terms and conditions

Code

<c-lb.fieldset legend="I accept the terms and conditions">
  <c-lb.checkbox validate required />
  <c-lb.validator.hint>You must accept the terms and conditions</c-lb.validator.hint>
</c-lb.fieldset>

Form Example

Preview

Code

<form class="fieldset w-52 gap-2">
  <c-lb.fieldset legend="Email">
    <c-lb.input validate type="email" required placeholder="[email protected]" />
    <c-lb.validator.hint hidden>Enter a valid email address</c-lb.validator.hint>
  </c-lb.fieldset>
  <c-lb.fieldset legend="Username">
    <c-lb.input validate type="text" required placeholder="Username" pattern="[A-Za-z][A-Za-z0-9\-]*" minlength="3" maxlength="30" />
    <c-lb.validator.hint hidden>Must be 3-30 characters, starting with a letter</c-lb.validator.hint>
  </c-lb.fieldset>
  <c-lb.fieldset legend="Password">
    <c-lb.input validate type="password" required placeholder="Password" minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" />
    <c-lb.validator.hint hidden>8+ characters with uppercase, lowercase, and number</c-lb.validator.hint>
  </c-lb.fieldset>
  <c-lb.button type="submit" variant="primary">Sign Up</c-lb.button>
</form>

API Reference

`c-lb.validator.hint`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
hidden	boolean	`False`	No	Hide the hint by default

Slot Name	Description
default	Hint message text