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 jquery.pin.min.js after you've already load the jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.pin.min.js"></script>

4. Initialize the plugin with some options:

$('[data-pin]').pin({
  displayMessage: $('.message'),
});

5. Activate the input validation:

$('[data-pin').data('plugin_pin').init(true);

6. Enable/disable the validation rules.

$('[data-pin]').pin({
  isPassword: false,
  showvValidErrorMessage: true,
  allowSequential: true,
  allowRepeat: true
});

7. Customize the error messages.

$('[data-pin]').pin({
  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.

$('[data-pin]').pin({
  count: 4
});

---

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