Powerful HTML5 Form Validation Plugin - jQuery DjValidator

DjValidator is a simple, flexible, powerful jQuery based HTML5 form validator that comes with 20+ built-in validation rules and is easy to extend using your own validations.

Available validation rules:

• Required field: Uses the "required" HTML5 attribute
• Text: Any character with min/max values
• Alphabetic Text: Uppercase and lowercase alphabetic characters.
• Alphabetic Text and Digits: Digits and alphabetic characters in uppercase and lowercase letters.
• Word: Any character except the spaces.
• Only Digits: A single digit text
• Only Integers: Only positive or negative integers.
• Any Real Number: Any type of real number, using the period (.) as decimal separator.
• Email: Valid email address.
• URL: Valid URL.
• Phone Number: Valid telephone numbers
• File Validation: Validates file-type inputs based on the javascript API.
• File Extension Validation: Validates only the extension of the selected file within the list of allowed extensions.
• IP Adredss: Valid IP addresses
• Select Multiple: Validate the number of options selected from a select multiple.
• Radio Buttons: Validates the required selection of a radio button from a group of radios (with the same name).
• Checkboxes: Validates the marking of a defined group of boxes.
• Equal Fields: Validate that the value of the field is equal to that specified, [id] must be of the field (other) with which to compare.
• Different Fields: Validate that the value of the field is different from that specified, [id] must be of the field (other) with which to compare.
• Optional Fields: Validate that at least one of the fields in the group is not empty (required group).

Basic usage:

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 your form fields using the data-dj-validator attribute. All possible parameters:

• Required field: Uses the "required" HTML5 attribute
• Text: text, [min],[max]
• Alphabetic Text: atext, [min],[max]
• Alphabetic Text and Digits: antext, [min],[max]
• Word: word, [min],[max]
• Only Digits: dig, [min],[max]
• Only Integers: int, [min],[max]
• Any Real Number: num, [min],[max]
• Email: email,[max]
• URL: url,[max]
• Phone Number: phone
• File Validation: file,[min],[max],[min_size],[max_size],[type1|type2....]
• File Extension Validation: efile,[e1|e2|e3….]
• IP Adress: Ip,[type(v4 or v6)]
• Select Multiple: multi,[min],[max]
• Radio Buttons: radio
• Checkboxes: check,[group],[min],[max],[label]
• Equal Fields: equal,[id]
• Different Fields: nequal,[id]
• Optional Fields: or,[group],[label]
• Regular Expressions: regexp,[ regular_expresion],[ flags]
• Custom Function: call,[function_name]

<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>
</form>

3. Attach the form validation plugin to the form. Done.

$('#myform').djValidator();

4. The plugin also supports server side form validation.

<input type="text" data-dj-validator="ajax,https://localhost:8080/system/validate">

$(“#my-form”).djValidator({
  mode: 'function',
  request_method: 'get',
  success:
    function($form){
     alert('validation finish');
    }
});

5. Customize the validation mode you prefer.

$('#myform').djValidator({

  // 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. Execute a callback function in cases where all fields are valid.

$('#myform').djValidator({
  success: function ($form) {
    return true;
  }
});

7. All default options.

$('#myform').djValidator({

  // 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 validation rules.

<input name="textinput" type="text" data-dj-validator="call,isUpperCase">

function isUpperCase($field){
  value=$field.val();
  if(value==value.toUpperCase())return true;
  else return false;
}

9. All possible data attributes:

• data-dj-validator: validation rule
• data-dj-validator-group: a group of related form fields
• data-dj-validator-msg: custom validation message
• data-input-group: input group

10. Default validation messages:

$.setDjValidatorLabels({
    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.'
})

Changelog:

v2.0.0 (2021-02-11)

• add improvements and new functionalities

v1.1.1 (2018-07-05)

• Update

---

This awesome jQuery plugin is developed by esneyderg357. For more Advanced Usages, please check the demo page or visit the official website.