jQuery Widget for Dynamic Input Helper Text

This is a proof of concept widget that I demoed for work. The desire is to update some text according to a regex and replacement, when an input field changes. This will allow developers to show a message and/or format the input value, so users understand they do not need to enter meta characters and see the result of their input (think phone or identification numbers). I built a simple jQuery plugin that can be used by anyone, and here is a demo app with the code.

How do it…

I'm not going to show a sample of JavaScript code, because it is not terribly complicated, but I will discuss how it works it in the next section. Here is an example of the markup:

<div>
  <label>Test US Phone</label>
  <input id="id_test_us_phone" data-placeholder="0" data-rxmatcher="(\d{3})(\d{3})(\d{4})" data-replacement="$1-$2-$3" maxlength="10" type="text" value="" />
  <span class="regexInputNote"></span>
</div>

If you include the plugin, then you can activate this markup using:

$('#id_test_us_phone').regexInputNote();

All hardcoded attributes can be changed by passing options to the regexInputNote. Here are the defaults:

$('#id_test_us_phone').regexInputNote({
  dataAttrMatcherRegex: 'rxmatcher',
  dataAttrPlaceholder: 'placeholder',
  dataAttrReplacement: 'replacement',
  invalidText: 'Invalid input',
  replacementFunction: null,
  targetClass: sPluginMarker
});

How it works…

When the script runs it searches the siblings following the span for an element with the class defined as targetClass (default is regexInputNote). This indicates the element that will have its content replaced by the script. The script uses the dataAttrMatcherRegex (defaults to data-rxmatcher) to create a regex to evaluate anything typed into the input element, and then it uses the dataAttrReplacement (defaults to data-replacement) as the replacement string. So if you type 1234 into the input it will insert the equivalent of '1234'.replace(<value of data-rxmatcher>, <value of data-replacement>) into the sibling element.

There is one caveat, because we are using regex replacement, the input string must always match the regular expression for the replacement to work. Normally, 1234 would not match a phone number regular expression (since it does not have 7 or 10 digits), so I introduced the dataAttrPlaceholder (defaults to data-placeholder) which is the value to be used to fill the user input to the necessary length before running the regex replacement. This requires you also specify a maxlength attribute, so we know how long the string should be and what length the regular expression is expecting. Continuing with the phone example, if 1234 is entered, then the output would be 123-400-0000 showing the input formatted as a phone number.

Finally, if the transformation is sufficiently complex, it may not be possible with a regular expressions. For those cases, instead of using the attributes, the developer can simply set a function to the replacementFunction option. This function should accept the text input as its only argument and return whatever value should be written to the sibling element.

If you look at the JavaScript code, you will see that it is pretty straight forward. When the plugin initializes, it reads the data attributes and finds the sibling element before subscribing a key and change listener to the input. The callback handler just applies the regular expression or replacement function to the input and inserts it into the next sibling.