Customizable Pin Code Input Plugin For jQuery - pin.js

File Size: 9.25 KB
Views Total: 6610
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Customizable Pin Code Input Plugin For jQuery - pin.js

pin.js is a highly customizable jQuery pincode input plugin that allows to enter pin codes into individual input boxes with live validation support.

How to use it:

1. Create a container element for the pincode input.

<div data-pin></div>

2. Create another container element to place the error message when the pincode input is invalid.

<p class="message"></p>

3. Download and include the after you've already load the jQuery JavaScript library.

<script src="//"></script>
<script src=""></script>

4. Initialize the plugin with some options:

  displayMessage: $('.message'),

5. Activate the input validation:


6. Enable/disable the validation rules.

  isPassword: false,
  showvValidErrorMessage: true,
  allowSequential: true,
  allowRepeat: true

7. Customize the error messages.

  messages: {
    valid: 'Valid!',
    required: 'This field cannot be empty',
    numeric: 'This field requires a numeric value, no letters or special characters',
    sequential: 'This field cannot be sequential, e.g. 1234',
    repeat: 'This field cannot contain the same values only, e.g. 1111'

8. Adjust the maximum amount of digits allowed to be entered in the pincode input.

  count: 4

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