Noundry Elements

Basic Form Validation

HTML5 validation with real-time feedback using noundry-element

Registration Form

HTML Code

<noundry-element>

<form>

<input

type="text"

name="fullName"

required

minlength="2"

data-error="Please enter your full name"

>

<button type="submit">Register</button>

</form>

</noundry-element>

Custom Validation Rules

HTML5 validation with pattern matching and custom error messages

Password Strength Form

Validation Features

Pattern Matching

Use regular expressions for complex validation rules like password strength

pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).*$"

Length Validation

Enforce minimum and maximum length constraints

minlength="8" maxlength="100"

Custom Messages

Define user-friendly error messages with data-error attribute

data-error="Custom error message"

Range Validation

Set minimum and maximum values for numeric inputs

min="13" max="120"

Real-time Validation

Automatic feedback as users type with live validation states

Contact Form

Company Name *

Website URL

Business Email *

Employee Count *

Real-time Features

Live Validation

Validation occurs automatically as users type and on field change

Automatic Error Display

Error messages are automatically inserted after invalid fields

State Tracking

Track dirty, valid, and submitting states with data attributes

Custom Error Messages

Define custom messages per validation type

data-error-valuemissing="This field is required"

Event Handling

Custom form handling with JavaScript events

Newsletter Signup

First Name *

Email Address *

Interests

Web Development UI/UX Design JavaScript

Available Events

// Listen for form submission

element.addEventListener('noundry-submit', (e) => {

console.log(e.detail.values);

});

noundry-submit

Fired when form is valid and submitted. Contains values and formData.

noundry-invalid

Fired when form validation fails. Contains errors object.

noundry-input / noundry-change

Fired on field input/change with field name, value, and all values.

noundry-reset

Fired when the form is reset via the reset() method.

Advanced Features

JavaScript API and configuration options

Form with Auto-Disable

Configuration Options

Element Attributes

error-disable-submit

Disable submit button when form is invalid

reset-on-submit

Reset form after successful submission

default-submit

Allow default form submission behavior

data-error="message"

Custom error message for input fields

JavaScript API

const el = document.querySelector('noundry-element');

el.reset(); // Reset form

el.getValues(); // Get values

el.setValues({name: 'John'});

el.setValidationRule('field', fn);

el.requestSubmit();