oziAuth

Version: 3.0.0 — Updated: 2026-05-27

Description

Authentication form validation plugin. Concentrates password, email and confirmation rules in an isolated engine — oziAuth() — and applies real-time visual feedback on fields, rules list and submit button, guiding the user to fill in the correct order.

Examples

[1] Full form with rules list

<input type="email" name="email"
    data-ozi-auth-mail
    class="form-control"
    placeholder="E-mail">

<input type="password" name="password"
    data-ozi-auth-pass="bi bi-eye-slash,bi bi-eye"
    class="form-control"
    placeholder="Password">

<input type="password" name="confirm"
    data-ozi-auth-confirm="bi bi-eye-slash,bi bi-eye"
    class="form-control"
    placeholder="Confirm password">

<div id="passwordRules"></div>

<button type="submit"
    data-ozi-auth-submit
    data-ozi-auth-list-id="passwordRules"
    data-ozi-auth-check="bi bi-circle,bi bi-check2-circle"
    class="btn btn-secondary"
    disabled>
    Save
</button>

[2] With rules dropdown

<input type="password" name="password"
    data-ozi-auth-pass="bi bi-eye-slash,bi bi-eye"
    class="form-control">

<button type="submit"
    data-ozi-auth-submit
    data-ozi-auth-dropdown
    class="btn btn-secondary"
    disabled>
    Save
</button>

[3] With username field

<input type="text" name="username"
    data-ozi-auth-user
    data-ozi-auth-user-caracter="4"
    class="form-control"
    placeholder="Username">

[4] List + Dropdown simultaneously

<button type="submit"
    data-ozi-auth-submit
    data-ozi-auth-list-id="passwordRules"
    data-ozi-auth-dropdown
    class="btn btn-secondary"
    disabled>
    Save
</button>

<div id="passwordRules"></div>

[5] Validation engine via JavaScript

Use oziAuth() in isolation to validate programmatically:

const result = oziAuth({
    mail:        'user@email.com',
    password:    'Password@123',
    confirm:     'Password@123',
    userCaracter: 4
});

if (result.access) {
    console.log('✔ All valid — ready to submit!');
} else {
    console.log('✘ Errors:', result);
}

Features

• Isolated engine — oziAuth() validates without depending on the DOM
• Real-time feedback — rules updated on every keystroke
• Show/hide toggle — customizable icons on password fields
• Rules list — rendered in a configurable container
• Rules dropdown — displayed when focusing on the password field
• Count badge — displays real-time progress (6/14 · 2 remaining)
• Fill order — email validated when typing the password
• Customizable icons — valid/invalid states configurable

HTML Attributes

[1] Fields

[2] Visual Feedback

[3] Display Rules

Validations

Username

• Minimum length defined by data-ozi-auth-user-caracter

Email

• Valid format: name@domain.com

Password

Confirmation

• Must be identical to the password

Count Badge

The passLength rule displays real-time progress:

oziAuth() engine return

{
    userValid:        true,  // username meets minimum characters
    mailValid:        true,  // email in valid format
    passLength:       true,  // between 8 and 14 characters
    passLowercase:    true,  // has lowercase letter
    passUppercase:    true,  // has uppercase letter
    passNumber:       true,  // has number
    passSpecial:      true,  // has special character
    passNoSpace:      true,  // no spaces
    passNoEmailParts: true,  // password does not contain email parts
    passConfirm:      true,  // confirmation matches password
    access:           true   // true only if all rules are met
}

Public API

Usage with dynamic content

// After inserting HTML into the DOM
window.oziAuthInitFetched($('#destination')[0]);

// Or via event
$(document).trigger('oziAuth:initFetched', [rootElement]);