Simplest WebForms Validation jQuery Plugin | DjValidator

DjValidator is the most simple, flexible, and fast to use jquery plugin for webform validation, and it does not depend on any UI framework. Available in both English and Spanish.


  • It only requires Jquery, 1.5.1 or higher, and doesn’t depend on any UI framework.
  • Validation rules are laid out using a single “data-dj-validator” attribute, and they recognize the “required” attribute to validate required fields.
  • All customization options: pattern, messages, and validation.
  • Compact and fast typing multifunction verification rule set.
  • Various ways to implement verification.
  • Supports server verification (asynchronous).
  • 22 validation rules available.
  • You can create your own verification tools using 3 different alternatives.
  • The validation rules can be changed dynamically.
  • Change the style of validation messages.

How to make use of it:

1. Download and insert the main JavaScript file DjValidator.js after jQuery.

<script src="jquery.min.js"></script>
<script src="DjValidator.js"></script>

2. Apply validation rules with parameters to form fields using the data-dj-validator attribute.

<form id="myform">
  <textarea name="textarea" placeholder="text,3,12" data-dj-validator="text,3,12" required></textarea>
  <input name="textinput" type="text" placeholder="atext,3,12" data-dj-validator="atext,3,12" required> 
  <button type="button" id="validate" name="singlebutton">Validate!</button>

3. Attach the plugin to validate the model in the form.


4. The plugin also supports server-side form validation.

<input type="text" data-dj-validator="ajax,https://localhost:8080/system/validate">
  mode: 'function',
  request_method: 'get',
     alert('validation finish');

5. Customize the verification mode you prefer.


  // submit : validate the form on submit
  // function : validate the form when a function is excuted, it only returns: true, false or null
  // clean: clear all fields and error messages
  // blur: validate the field on blur
  mode: 'submit'

6. Implement the callback function in cases where all fields are valid.

  success: function ($form) {
    return true;

7. All options are default.


  // validation mode
  mode: 'submit',

  // equivalent to "blur" mode , but only works when the mode is "submit"
  blur: true,

  // apply styles to invalid fields
  decorate: true,

  // border color
  border_color: 'red',

  // additional styles
  style:'display:none; color:red; text-align:inherit; font:italic bold .9em sans-serif',

  // custom template
  template:'<p class="dj-validator-msg" style="$style">$msg</p>',

  // or 'get'
  request_method: 'post',

  // success callback
  success: function($form){return true;}

8. Add your own verification rules.

<input name="textinput" type="text" data-dj-validator="call,isUpperCase">
function isUpperCase($field){
  if(value==value.toUpperCase())return true;
  else return false;

9. Default verification messages.

    required:'Required field.',
    word_min:'At least $1 characters with no spaces.',
    word_between:'Between $1 and $2 characters with no spaces.',
    atext_min:'At least $1 alphabetic characters.',
    atext_between:'Between $1 and $2 alphabetic characters.',
    antext_min:'At least $1 alphabetic characters or digits.',
    antext_between:'Between $1 and $2 alphabetic characters or digits.',
    text_min:'At least $1 characters.',
    text_between:'Between $1 and $2 characters.',
    int_invalid:'Invalid integer.',
    int_min:'The number must be greater than or equal to $1.',
    int_max:'The number must be less than or equal to $1',
    int_between:'The number must be between $1 and $2.',
    num_invalid:'Invalid real number.',
    num_min:'The number must be greater than or equal to $1.',
    num_max:'The number must be less than or equal to $1',
    num_between:'The number must be between $1 and $2.',
    dig_min:'At least $1 digits.',
    dig_between:'Between $1 and $2 digits.',
    file_min:'Select at least $1 files.',
    file_between:'Select between $1 and $2 files.',
    file_format:'Invalid file type.',
    file_min_size:'Files must be larger than $1 kb in size.',
    file_max_size:'Files must be less than $1 kb. in size',
    file_ext:'Valid file extensions: $1.',
    email:'Invalid email.',
    email_max:'Email must be less than $1 characters.',
    phone:'Invalid phone number.',
    url:'Invalid url.',
    url_max:'URL must be less than $1 characters',
    ip:'Invalid $1 address',
    regexp:'Invalid value.',
    or:'$1: At least one of these fields is required.',
    equal:'Must be equal to: $1.',
    not_equal:'Must be different from: $1.',
    multi_min:'Select at least $1 options',
    multi_between:'Select from $1 to $2 options.',
    call:'Invalid value.',
    radio:'Check an option.',
    check_single:'Check this option.',
    check_multi_min:'$1: Check at least $2 options.',
    check_multi_between:'$1: Check from $2 to $3 options.',
    ajax:'Rejected value.',
    ajax_validating:'Field is validating, please wait...',
    ajax_fail:'Error, could not be validated.'

Powerful HTML5 Form Validation Plugin, DjValidator Github

See Demo And Download

Official Website(esneyderg357): Click Here

This superior jQuery/javascript plugin is developed by esneyderg357. For extra Advanced Usages, please go to the official website.

Related Posts


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


Create a Beautiful Mobile App-Like Sliding Menu | mmenu.js

Mmenu is the best JavaScript plugin for both on and off-canvas(hamburger menu) menus with sliding submenus for your website and web app. It is very customizable with…

Leave a Reply

Your email address will not be published. Required fields are marked *