Simple demo to show how to use Javascript function with ConfiForms Field Definition Rule


We just add a counter to textarea field and track the user input (there is no validation here, it is just a demo on how to glue together ConfiForms  field definition rule with custom JavaScript function and how to access the form field)



<script>

function addCounter(formName, formId) {
  var taElem = AJS.$('#' + formId).find('#i_ta'); // find the "textare field" by name "ta"
  if (!taElem.hasClass('cfcounter')) {
   taElem.addClass('cfcounter'); // this is sort of a marker that tells if the "counter div" is initialized
   taElem.after('<div id="i_taCharNum">10 characters left</div>');

   // setup handler
   taElem.on("input", function(){
    var maxlength = 10;
    var currentLength = AJS.$(this).val().length;

	var charsLeft = maxlength - currentLength;
    AJS.$('#i_taCharNum').html(Math.max(0, charsLeft, charsLeft) + " chars left");
   });
  }
}
</script>

Storage format

<ac:structured-macro ac:macro-id="cc63f296-c16b-49ac-ae4c-4f4df68a6c7a" ac:name="confiform-entry-register" ac:schema-version="1">
  <ac:parameter ac:name="embedded">true</ac:parameter>
  <ac:rich-text-body>
    <p>
      <br/>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="4fd4a40e-d0a0-47b0-82f7-7f034a606568" ac:name="confiform" ac:schema-version="1">
  <ac:parameter ac:name="formName">myform1</ac:parameter>
  <ac:rich-text-body>
    <p>
      <ac:structured-macro ac:macro-id="abdd5765-8d68-4fc9-8d9f-715c68fdeddc" ac:name="confiform-field-definition" ac:schema-version="1">
        <ac:parameter ac:name="fieldName">ta</ac:parameter>
        <ac:parameter ac:name="fieldLabel">ta</ac:parameter>
        <ac:parameter ac:name="type">textarea</ac:parameter>
      </ac:structured-macro>
    </p>
    <p>
      <ac:structured-macro ac:macro-id="24c415b4-ba74-429b-a651-cf9521913dab" ac:name="confiform-field-definition-rules" ac:schema-version="1">
        <ac:parameter ac:name="values">addCounter(formName, formId);</ac:parameter>
        <ac:parameter ac:name="action">Run custom JavaScript</ac:parameter>
      </ac:structured-macro>
    </p>
  </ac:rich-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="3496b6cf-5467-45eb-a4db-0cdb4c0a423e" ac:name="html" ac:schema-version="1">
  <ac:plain-text-body><![CDATA[<script>  
function addCounter(formName, formId) {
  var taElem = AJS.$('#' + formId).find('#i_ta'); // find the "textare field" by name "ta"
  if (!taElem.hasClass('cfcounter')) {
   taElem.addClass('cfcounter'); // this is sort of a marker that tells if the "counter div" is initialized
   taElem.after('<div id="i_taCharNum">10 characters left</div>');

   // setup handler
   taElem.on("input", function(){
    var maxlength = 10;
    var currentLength = AJS.$(this).val().length;

	var charsLeft = maxlength - currentLength;
    AJS.$('#i_taCharNum').html(Math.max(0, charsLeft, charsLeft) + " chars left");
   });
  }
}  
</script>]]></ac:plain-text-body>
</ac:structured-macro>