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

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.