Forms: Validation - Launchpad

Contextual states

Add .is-{invalid|valid|warning|info} to the control. The matching sibling feedback (.lp-{invalid|valid|warning|info}-feedback) becomes visible, the label is tinted, and the control border — including hover and focus — matches the state color.

Invalid state ⊗ Please enter a valid email address

Valid state ✓ Username is available

Warning state ⚠ Password is weak, consider adding special characters

Info state ⓘ We'll send a verification code to this number

<p class="lp-text-sm lp-text-muted lp-mb-3">Add <code class="lp-code">.is-{invalid|valid|warning|info}</code> to the control. The matching sibling feedback (<code class="lp-code">.lp-{invalid|valid|warning|info}-feedback</code>) becomes visible, the label is tinted, and the control border — including hover and focus — matches the state color.</p>
<div class="lp-grid lp-grid-cols-2 lp-gap-3 lp-grid-cols-sm-1">
    <div class="lp-form-group">
        <label class="lp-form-label">Invalid state</label>
        <input type="email" class="lp-form-control is-invalid" value="invalid-email" />
        <span class="lp-invalid-feedback">⊗ Please enter a valid email address</span>
    </div>
    <div class="lp-form-group">
        <label class="lp-form-label">Valid state</label>
        <input type="text" class="lp-form-control is-valid" value="johndoe" />
        <span class="lp-valid-feedback">✓ Username is available</span>
    </div>
    <div class="lp-form-group">
        <label class="lp-form-label">Warning state</label>
        <input type="password" class="lp-form-control is-warning" value="1234567" />
        <span class="lp-warning-feedback">⚠ Password is weak, consider adding special characters</span>
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Info state</label>
        <input type="tel" class="lp-form-control is-info" placeholder="Enter phone number" />
        <span class="lp-info-feedback">ⓘ We'll send a verification code to this number</span>
    </div>
</div>

Neutral (default) state

Phone Include country code when dialing internationally.

<div class="lp-form-group lp-mb-0">
    <label class="lp-form-label">Phone</label>
    <input type="tel" class="lp-form-control" value="+1 (555) 010-0001" />
    <span class="lp-form-text">Include country code when dialing internationally.</span>
</div>

Hover & focus preview

Move your cursor over each control to see the matching contextual hover border, then click to see the matching focus ring.

Hover / focus invalid

Hover / focus valid

Hover / focus warning

Hover / focus info

<p class="lp-text-sm lp-text-muted lp-mb-3">Move your cursor over each control to see the matching contextual hover border, then click to see the matching focus ring.</p>
<div class="lp-grid lp-grid-cols-2 lp-gap-3 lp-grid-cols-sm-1">
    <div class="lp-form-group">
        <label class="lp-form-label">Hover / focus invalid</label>
        <input type="text" class="lp-form-control is-invalid" placeholder="Hover me then click" />
    </div>
    <div class="lp-form-group">
        <label class="lp-form-label">Hover / focus valid</label>
        <input type="text" class="lp-form-control is-valid" placeholder="Hover me then click" />
    </div>
    <div class="lp-form-group">
        <label class="lp-form-label">Hover / focus warning</label>
        <input type="text" class="lp-form-control is-warning" placeholder="Hover me then click" />
    </div>
    <div class="lp-form-group lp-mb-0">
        <label class="lp-form-label">Hover / focus info</label>
        <input type="text" class="lp-form-control is-info" placeholder="Hover me then click" />
    </div>
</div>

Live validation (FormController)

Each field has data-lp-rules listing validation rules. The form validates on blur and on submit.

<p class="lp-text-sm lp-text-muted lp-mb-2">Each field has <code class="lp-code">data-lp-rules</code> listing validation rules. The form validates on blur and on submit.</p>
<form data-lp-component="form-controller" data-lp-validation="onBlur" id="val-form">
    <div class="lp-form-group" data-lp-component="field" data-lp-rules="required|email">
        <label class="lp-form-label lp-form-label-required" for="val-email">Email</label>
        <input id="val-email" name="email" type="email" class="lp-form-control" />
        <span class="lp-invalid-feedback"></span>
    </div>

    <div class="lp-form-group" data-lp-component="field" data-lp-rules="required|min:8">
        <label class="lp-form-label lp-form-label-required" for="val-password">Password</label>
        <input id="val-password" name="password" type="password" class="lp-form-control" />
        <span class="lp-invalid-feedback"></span>
        <span class="lp-form-text">Must be at least 8 characters.</span>
    </div>

    <div class="lp-form-group" data-lp-component="field" data-lp-rules="required|match:password">
        <label class="lp-form-label lp-form-label-required" for="val-confirm">Confirm password</label>
        <input id="val-confirm" name="password_confirm" type="password" class="lp-form-control" />
        <span class="lp-invalid-feedback"></span>
    </div>

    <div class="lp-form-group" data-lp-component="field" data-lp-rules="required">
        <label class="lp-form-label lp-form-label-required">I agree to the terms</label>
        <label class="lp-checkbox">
            <input type="checkbox" name="terms" />
            <span class="lp-checkbox-box"></span>
            <span>Yes, I agree</span>
        </label>
        <span class="lp-invalid-feedback"></span>
    </div>

    <button type="submit" class="lp-btn lp-btn-primary">Submit</button>
</form>

Built-in validation rules

Rule	Syntax	Checks
`required`	`required`	Value is not empty
`email`	`email`	Valid email format
`url`	`url`	Valid URL format
`numeric`	`numeric`	Numeric string
`alpha`	`alpha`	Letters only
`phone`	`phone`	Phone number format
`min`	`min:8`	Minimum length / numeric value
`max`	`max:100`	Maximum length / numeric value
`pattern`	`pattern:^[a-z]+$`	Matches a regex
`match`	`match:password`	Equals another field's value

Separate multiple rules with |. Parameters follow a colon. Rules can also be registered programmatically via Validator.register(name, fn).

CSS reference

Class	Purpose
`.is-invalid`	On control: red border + tinted label; reveals `.lp-invalid-feedback`
`.is-valid`	On control: green border + tinted label; reveals `.lp-valid-feedback`
`.is-warning`	Launchpad extension: amber border + tinted label; reveals `.lp-warning-feedback`
`.is-info`	Launchpad extension: blue border + tinted label; reveals `.lp-info-feedback`
`.lp-{invalid\|valid\|warning\|info}-feedback`	Message element paired with each state (hidden by default)
`.lp-form-text`	Muted hint text (auto-hidden when any state class is present on the control)

Hover and focus rings automatically pick up the state color — e.g. a control with .is-warning keeps its amber border on hover and gets an amber focus halo instead of the default primary blue.