🦖 dino-validation

A vanilla JavaScript form validation library - no jQuery required.

This library is a partial port of the jQuery Validation Plugin by Jörn Zaefferer.

features

• 16 built-in validation methods - required, email, URL, number, date, minlength, and more
• Significantly smaller than jQuery Validation - Pure vanilla JavaScript with zero dependencies
• Declarative or programmatic API - Define rules in HTML attributes or JavaScript
• Zero dependencies - No jQuery required, works everywhere
• Modern ES6+ - ESM and UMD builds for all environments
• Localization support - Customize error messages/methods for any locale

examples

Explore interactive examples to see dino-validation in action:

• 📝 [quick start] Simple contact form showing the minimal setup needed to get started. Includes required fields, email validation, and custom error messages.

• 🔄 [jquery-validation vs dino-validation] Side-by-side comparison demonstrating feature parity between jquery-validation and dino-validation. See how the same form behaves identically with both libraries.

• 📋 [declarative config] Define all validation rules using HTML data attributes - no JavaScript configuration needed. Perfect for simple forms.

• 🔧 [custom methods] Extend the library's capabilities by creating custom validation methods for specific business requirements. Demonstrates an age verification method with complex date validation logic.

• 📍 [error placement] Customize where and how validation errors are displayed. Showcases six different error placement strategies: default placement, designated containers, tooltips, grid layouts, error summaries, and inline errors.

installation

umd (cdn)

For direct browser usage via CDN - no build tools required:

<script src="https://cdn.jsdelivr.net/npm/dino-validation@VERSION/dist/dv.min.js"></script>
<script>
  dv.validate('#myForm', {
    rules: {
      email: { required: true, email: true },
    },
  });
</script>

esm (npm)

For modern build tools (Vite, webpack, Rollup, etc.):

npm install dino-validation

import dv from 'dino-validation';

const validator = dv.validate('#myForm', {
  rules: {
    email: { required: true, email: true },
  },
});

size comparison

dino-validation is significantly smaller than the jQuery-based alternative:

| Library | Bundle Size (minified + gzipped) | Dependencies | | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------- | --------------- | | dino-validation | | None ✓ | | jquery-validation(+ jquery) | | Requires jQuery |

🦖 Zero dependencies, modern vanilla JavaScript

Bundle sizes from Bundlephobia (latest published versions)

quick start

Define validation rules directly in HTML using html attributes:

<form id="contactForm">
  <div>
    <label for="email">Email:</label>
    <!-- rules: email, required -->
    <input
      type="email"
      name="email"
      id="email"
      required="true"
      placeholder="[email protected]"
    />
  </div>

  <div>
    <label for="message">Message:</label>
    <!-- rules: required, minlength -->
    <textarea
      name="message"
      id="message"
      required="true"
      minlength="10"
      placeholder="Your message (min 10 characters)"
    ></textarea>
  </div>

  <button type="submit">Send</button>
</form>

<script>
  // Initialize validator
  dv.validate('#contactForm');
</script>

Define validation rules in JavaScript for more control:

dv.validate('#contactForm', {
  rules: {
    email: {
      required: true,
      email: true,
    },
    message: {
      required: true,
      minlength: 10,
    },
  },
  messages: {
    email: {
      required: 'Please enter your email address',
      email: 'Please enter a valid email address',
    },
    message: {
      required: 'Please enter a message',
      minlength: 'Your message must be at least 10 characters long',
    },
  },
});

// Check if entire form is valid
if (dv.valid('#contactForm')) {
  console.log('Form is ready to submit!');
}

// Check specific field
if (dv.valid('#email')) {
  console.log('Email is valid');
}

// Check multiple fields
if (dv.valid('#email, #message')) {
  console.log('Both fields are valid');
}

// Using element reference
const emailInput = document.getElementById('email');
if (dv.valid(emailInput)) {
  console.log('Email is valid');
}

other documentation

• 📚 [api reference] Core API methods (dv.validate, dv.valid, dv.rules, etc.)

• ✅ [built-in validation methods] Complete list of all 16 validation methods

• 🔧 [custom validation methods] Creating custom validation methods

• 💬 [error messages] Customizing validation error messages

• ⚙️ [configuration] Configuration options

• 🌍 [localization] Support for other locales across the world.

• 🔄 [migrating from jquery-validation] Differences from jquery-validation api

browser support

This library targets modern evergreen browsers with ES6+ support.

The last 2 versions of the following are supported: [Chrome, Edge, Firefox, Safari, Safari iOS, Chrome Android]

coming soon

The following features are planned for future releases:

• Additional validation methods - Port community-contributed validation methods from jQuery Validation's additional-methods.js dist file
• Normalizer support - Ability to transform/normalize field values before validation (e.g., trim whitespace, convert to lowercase)
• Documentation site - Dedicated documentation website with interactive examples and improved navigation
• Unobtrusive validation support - Support for data-val-* attributes to enable seamless integration with server-side frameworks (ASP.NET MVC, etc.) where validation rules defined in server-side model annotations are automatically applied client-side

contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines on:

• Setting up your development environment
• Making changes and running tests
• Conventions & Pull request process

license

MIT License - See LICENSE file for details.

This library is based on the jQuery Validation Plugin by Jörn Zaefferer.