JQuery plugin that checks text input against a set of rules you specify and provides feedback in real time.
Switch branches/tags
Nothing to show
Pull request Compare This branch is 42 commits behind Availity:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
LICENSE
README.md
jquery.textcomplies.js
test.html

README.md

Text Complies

A jQuery plugin that checks text input against a set of rules you specify and provides feedback in real time.

Description

With the Text Complies plugin, you can specify a set of rules that the input for a specified text field must comply with. As the user types in the field you're checking, the compliance level to the rules is updated, and you can report to the user which rules they're complying with and which rules they're defying.

A typical usage for this plugin is with passwords; you can provide a set of rules (e.g., password must be 8-12 characters, contain one letter and one number, and can't contain spaces), and this plugin list the rules and whether or not the password the user is typing complies with those rules. As the user types the password, this plugin updates the compliance to the rules.

Options

Text Complies allows you to configure several preset rules for compliance checking, each with accompanying text that you can override. Rules you don't configure are not invoked. Your options are:

Option Name Description
minLength The minimum allowable length of the text
maxLength The maximum allowable length of the text
numNumbers The minimum number of numbers (digits) that the text must contain
numUppercaseLetters The minimum number of uppercase letters that the text must contain
numLowercaseLetters The minimum number of lowercase letters that the text must contain
numLetters The minimum number of letters that the text must contain
disallowed An array containing strings that are disallowed in the text
matchField The selector of a text field whose input must match the text
onComplies A JavaScript method to run if the new text complies with all the configured rules
onDefies A JavaScript method to run if the new text doesn't comply with all the configured rules
output The selector of an HTML element in which to display the output of how the text complies with the rules

Usage

<input name="password" type="password" id="password" />
<input name="password_match" type="password" id="password_match" />
<div id="password_compliance">
  The compliance goes here
</div>
<input type="button" value="submit" id="myButton" />
<script>
  $('#password').textComplies({
    output: $('#password_compliance'),
    minLength: 3,
    maxLength: 12,
    disallowed: [ ' ', '$', 'password' ],
    matchField: $('#password_match'),
    onComplies: passwordComplies,
    onDefies: passwordDefies
  });

  function passwordComplies() {
    $('#myButton').removeAttr('disabled');
  }

  function passwordDefies() {
    $('#myButton').attr('disabled', 'disabled');
  }
</script>

<style>
  .complies {
    background-color: green;
  }

  .defies {
    background-color: red;
  }

  #password_compliance {
    border: 1px solid black;
  }
</style>

Links