jQuery Field Compare String

A jQuery plugin for live comparison between the typed value of an input[type=text] or textarea form fields and the text string contained by a specified html element. It presents feedback on the transcription progress and can also protect the form field from copy-paste and drag-drop events (optional feature) to ensure that the user is required to type in the exact reference text string. The comparison is case-sensitive so the typed text has to be exact to trigger the success message.

Demo 1 . default options

Tip! Type in the bold text preceding each form field.

Demo 2 . copy-paste / drag-drop protection

Tip! Try to copy-paste or drag-drop some text into the form field.

Demo 3 . custom text for validation messages

Tip! Type in the bold text and check the validation messages are different from the default.

How to use

1. Add the CSS file to the HEAD section of your HTML.

<link type="text/css" rel="stylesheet" href="jquery.jFieldCompareString.min.css" />

2. Add the JS file to the end of the BODY section of your HTML and after jQuery.

<script src="jquery.jFieldCompareString.min.js"></script>

3. Place the HTML code.

<div class="jfcs-wrapper">

  <!-- Reference text string container -->
  <div class="jfcs-reference">
    I agree with the terms of this contract.
  </div>

  <!-- Form field container -->
  <div class="jfcs-field">
    <input type="text" id="editable-input-1" />
  </div>

</div>

4. Trigger the use of the jquery.jFieldCompareString function by a form field selection.

<script>
  $(function() {
    $('#editable-input-1').jFieldCompareString();
  });
</script>

Options

Here is an example of all the usable options.

<script>
  $(function() {
    $('#editable-input-1').jFieldCompareString({
      compare_to:         '#reference-text-2',    // Specify a reference element anywhere in the page
      field_protection:   true,                   // Enable the copy-paste / drag-drop protection
      msg_notok:          'A mistake was made!',  // Override the 'NOT-OK' validation message
      msg_incomplete:     'It\'s incomplete!',    // Override the 'INCOMPLETE' validation message
      msg_ok:             'It\'s correct!'        // Override the 'OK' validation message
    });
  });
</script>

When using the "compare_to" option, you will have to IDentify the reference text HTML element.

<!-- Reference text string ANYWHERE on the page BODY with its ID -->
<span id="reference-text-2">
  I also declare this and this.
</span>

... ...

<div class="jfcs-wrapper">

  <!-- Form field container -->
  <div class="jfcs-field">
    <input type="text" id="editable-input-2" />
  </div>

</div>

Final thoughts

Hope this plugin helps you guide your users to transcript whatever text you want them declare on your web application with the confort of live feedback. Any questions or comments can be sent to dev--at--uxd--dot--pt