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

Define custom validation logic with JavaScript functions

Password Strength Form

Username *

Password *

Confirm Password *

Age *

Account created successfully!

Validation Features

Pattern Matching

Use regular expressions for complex validation rules like password strength

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

Field Matching

Ensure two fields match using the data-match attribute

data-match="password"

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

Instant 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 as users type, providing immediate feedback

🎯 Smart Timing

Validation triggers intelligently to avoid annoying users

📱 Responsive Design

Error messages adapt beautifully to any screen size

🔧 Easy Configuration

Control validation timing with simple data attributes

data-validate-on="input"

AJAX Form Submission

Seamless form submission without page reloads

Newsletter Signup

First Name *

Email Address *

Interests

Web Development UI/UX Design JavaScript

AJAX Configuration

<noundry-element

data-ajax="true"

data-endpoint="/api/newsletter"

data-method="POST"

@submit-success="handleSuccess()"

>

Automatic Submission

Forms submit via AJAX automatically when configured

Event Hooks

Listen to submission events for custom handling

Error Handling

Built-in error handling and retry mechanisms

Advanced Features

Advanced validation techniques and configuration options

Multi-step Form

Step 1: Personal Info

Configuration Options

Data Attributes

data-validate-on="input"

Validate as user types

data-ajax="true"

Enable AJAX submission

data-multi-step="true"

Multi-step form support

data-error="Custom message"

Custom error messages

JavaScript API

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

form.validate();

form.reset();

form.getFormData();