Sadrazam – Form Validation Showcase

Data-attribute driven validation with real-time feedback, powered by Sadrazam.Form

How It Works

The validation system is driven entirely by HTML data attributes -- no extra JS wiring needed per field

Initialize Sadrazam.Form.perform('form')
Mark a field data-form-validate="required|email"
Custom message data-form-validate-message="Custom error text"
Display target data-form-validate-display="placeholder" or a CSS selector
Manual validate Sadrazam.Form.validate(element)

Available rules: required email min_length:N max_length:N min_value:N max_value:N matches:fieldName not_match:fieldName less_than:fieldName greater_than:fieldName regex:pattern

1. Required Fields

The required rule works on text inputs, selects, checkboxes, and radio buttons. Submit the empty form to see errors.

data-form-validate="required"

2. Email Validation

Combine required with email to enforce both presence and format. The email rule uses the pattern /^[^\s@]+@[^\s@]+\.[^\s@]+$/.

The email rule alone only triggers when the field has a value.

data-form-validate="required|email"

3. Min / Max Length

Use min_length:N and max_length:N to constrain character count. Validation is debounced at 300ms during live typing.

Try typing fewer than 3 or more than 20 characters.

data-form-validate="required|min_length:3|max_length:20"

4. Min / Max Value (Numeric)

Use min_value:N and max_value:N for numeric range validation. Also supports less_than:fieldName and greater_than:fieldName for cross-field comparison.

less_than:max_price on Min Price ensures it stays below Max Price, and vice versa.

data-form-validate="required|min_value:18|max_value:120"

5. Field Matching

Use matches:fieldName to ensure two fields have the same value (e.g. password confirmation). Use not_match:fieldName to ensure they differ (e.g. new password vs old password).

not_match:current_password prevents reuse of the same password.

data-form-validate="required|matches:password"

6. Regex Pattern Validation

Use regex:pattern for custom patterns. The value after regex: is passed directly to new RegExp().

This field uses data-form-validate-message for a custom error instead of the default "Regex mismatch" message.

data-form-validate="required|regex:^[a-z0-9-]+$"

7. Error Display Options

Control where and how error messages appear using data-form-validate-display and data-form-validate-message.

Error message is appended as a <span> inside the parent element.

With data-form-validate-display="placeholder", the error replaces the placeholder text.

The error is appended to #custom-error-target via data-form-validate-display="#custom-error-target".

data-form-validate-message overrides the default language-based error text.

If no data-form-validate-display is set, the system also checks for an element with id="err{Name}" before falling back to the parent.

data-form-validate-display="placeholder | #selector"

8. Form-Level Messages

Add data-form-validate-message on the <form> element itself to show a summary message when validation fails. Use data-form-validate-display to control where it appears.

data-form-validate-display="#form-level-error-area"

9. Manual / Programmatic Validation

Call Sadrazam.Form.validate(element) directly on a form or a single input for custom validation flows outside of form submission.

Sadrazam.Form.validate(inputEl) validates a single field; Sadrazam.Form.validate(formEl) validates all fields in the form.

10. Password Visibility Toggle

Use Sadrazam.Form.togglePasswordVisibility(button) to toggle between password and text input types. The button must be the next sibling of the input.

Sadrazam.Form.togglePasswordVisibility(button)

11. Complete Registration Form

A realistic example combining multiple validation rules: required, email, min_length, matches, regex, and custom messages.

12. Disabled Field Behavior

Disabled inputs are automatically skipped during validation. Errors are cleared when a field becomes disabled. Toggle the checkbox to enable/disable the input and try submitting.

Disabled inputs are skipped