Powerful HTML5 Form Validation Plugin - jQuery DjValidator

Powerful HTML5 Form Validation Plugin - jQuery DjValidator
File Size: 165 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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 Adress: 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.

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

4. Customize the validation mode you prefer.

$('#myform').djValidator({

  // callback: It is attached to the submit event of the form and calls the function passed in the parameter [callback] when all fields are valid.

  // validate: Valid a form as a function and returns true or false, used when sending the form by javascript (only invoked on a form).

  // field: invoked on a form field to validate it, returns true or false (only invoked on a field).
  mode: 'callback'
  
});

5. Execute a callback function after validation.

$('#myform').djValidator({
  mode: 'callback'
}, function(){
  // do something
});

6. Add your own validation rules.

$('#myform').djValidator({
  mode: 'callback'
}, function(){
  // do something
});

7. All possible data attributes:

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

8. Default validation messages:

var djv_labels={
  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:'Email not valid.',
  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.'
}

9. API methods.

// adds a new custom validator
$.addDjvalidator(key,msg,callback);

// sets the styles of validation messages
$.setDjvalidatorStyle(style);

// overrides the default validation messages
$.setDjValidatorLabels(labels);

Changelog:

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.