Confiforms: Running custom Java script at a specific point in a registration form

[Christian Perry]

Hi again!

I currently have a script set to change a message within a confiforms registration control macro depending on the value of a specific field. It works great when I leave the registration control blank (includes all fields from a form) but as soon as I create a custom registration control (adding specific fields into the macro) the script doesn't seem to display any messages at all. 

Basically I want to pick where in my registration form the script error message shows. (with specific fields) here is my current working format:

[Christian Perry]

<p>
<br/>
</p>
<ac:structured-macro ac:macro-id="e7f2b3cf-1e9b-4375-b042-47f2d30acdbd" ac:name="confiform-table" ac:schema-version="1">
<ac:parameter ac:name="formName">test1</ac:parameter>
<ac:rich-text-body>
<p>
<br/>
</p>
</ac:rich-text-body>
</ac:structured-macro>
<p>
<br/>
</p>
<ac:structured-macro ac:macro-id="b017bffd-93b5-437f-9768-ca5c9f413518" ac:name="confiform-entry-register" ac:schema-version="1">
<ac:parameter ac:name="overrideSaveButtonLabel">Submit</ac:parameter>
<ac:parameter ac:name="formName">test1</ac:parameter>
<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="94d53162-12e3-416e-a7fb-e5960098c729" ac:name="confiform" ac:schema-version="1">
<ac:parameter ac:name="formName">test1</ac:parameter>
<ac:rich-text-body>
<p>
<ac:structured-macro ac:macro-id="241f2833-1040-42bf-9e7d-a325596dfdff" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">score</ac:parameter>
<ac:parameter ac:name="fieldLabel">Score</ac:parameter>
<ac:parameter ac:name="type">text</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="c304ffb5-0dcf-40fe-b7c6-1b525ae8981e" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">rdarfailure</ac:parameter>
<ac:parameter ac:name="fieldLabel">1</ac:parameter>
<ac:parameter ac:name="type">textarea</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="1464b58a-27af-4c0f-a0ed-95ae742119f9" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">rdarissue</ac:parameter>
<ac:parameter ac:name="fieldLabel">2</ac:parameter>
<ac:parameter ac:name="type">textarea</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="9df7a908-2356-4d4d-aa0b-60dc6648ef53" ac:name="confiform-field-definition" ac:schema-version="1">
<ac:parameter ac:name="fieldName">rdarother</ac:parameter>
<ac:parameter ac:name="fieldLabel">3</ac:parameter>
<ac:parameter ac:name="type">textarea</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="933bf7c1-2141-4673-81c6-ece64a89cb54" ac:name="confiform-field-definition-rules" ac:schema-version="1">
<ac:parameter ac:name="condition">scoreCheck:"Error"</ac:parameter>
<ac:parameter ac:name="fieldName">ta</ac:parameter>
<ac:parameter ac:name="action">Hide field</ac:parameter>
<ac:parameter ac:name="actionFieldName">score</ac:parameter>
</ac:structured-macro>
</p>
<p>
<ac:structured-macro ac:macro-id="b3f04116-6d29-4ab5-919f-cba505afbc96" 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="2e80eecf-7c23-4105-8e13-0f692991d086" ac:name="html" ac:schema-version="1">
<ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
<ac:plain-text-body><![CDATA[<script>
function addCounter(formName, formId) {
var form = AJS.$('#' + formId);

// Find the specific textarea fields using their ConfiForms IDs
var rdarfailureElem = form.find('#i_rdarfailure'); // Changed from #i_textarea1
var rdarissueElem = form.find('#i_rdarissue'); // Changed from #i_textarea2
var rdarotherElem = form.find('#i_rdarother'); // Changed from #i_textarea3
var scoreElem = form.find('#i_score'); // Find the "Score" field
var submitButton = form.find('[type="submit"]'); // Find the submit button

// Create an array of the textarea elements that actually exist on the form
var textAreas = [rdarfailureElem, rdarissueElem, rdarotherElem].filter(function(elem) {
return elem.length > 0; // Only include elements that were found
});

// If no text areas are found, or the score field is missing, exit
if (textAreas.length === 0 || !scoreElem.length) {
console.warn("addCounter: Required fields (score or rdarfailure/rdarissue/rdarother) not found on form " + formId);
return;
}

// Use the first textarea found as the marker for initialization
var markerElem = textAreas[0];
var messageDivId = 'i_radars_message'; // Unique ID for the message div

// Prevent multiple initializations - check if the marker element already has the class
if (!markerElem.hasClass('cfcounter')) {
markerElem.addClass('cfcounter'); // Mark as initialized using the first textarea

// Add the message container after the score field (or choose another suitable location)
// Ensure it's only added once by checking if it already exists
if (form.find('#' + messageDivId).length === 0) {
scoreElem.after('<div id="' + messageDivId + '" style="display: none; margin-top: 5px;"></div>');
}
var messageDiv = form.find('#' + messageDivId); // Get the message div

function countValidNumbers() {
var combinedText = "";
// Concatenate text from all specified textareas
textAreas.forEach(function(taElem) {
combinedText += taElem.val() + "\n"; // Add newline separator just in case
});

// Match every 9-digit number in the combined text
var numberMatches = combinedText.match(/\d{9}/g);
var validNumberCount = numberMatches ? numberMatches.length : 0;

var scoreValue = parseFloat(scoreElem.val()) || 0; // Get score value (default to 0 if empty)

// Determine required numbers based on score range (same logic as before)
var requiredNumbers = 0;
if (scoreValue >= 100) requiredNumbers = 0;
else if (scoreValue >= 90) requiredNumbers = 1;
else if (scoreValue >= 80) requiredNumbers = 2;
else if (scoreValue >= 70) requiredNumbers = 3;
else if (scoreValue >= 60) requiredNumbers = 4;
else requiredNumbers = 5;

var errorMessage = "";
var canSubmit = true;

// Check number requirement
if (validNumberCount < requiredNumbers) {
var needed = requiredNumbers - validNumberCount;
errorMessage = `<span style="color: red;">Please submit at least ${needed} more radar${needed > 1 ? 's' : ''} across the failure, issue, or other fields.</span>`; // Updated message text slightly
canSubmit = false;
messageDiv.html(errorMessage).show(); // Show message if requirement not met
} else {
messageDiv.hide(); // Hide message if requirement is met
}

// Enable/disable submit button
if (submitButton.length) { // Check if submit button exists
submitButton.prop('disabled', !canSubmit);
}
}

// Trigger validation on input in any of the textareas and the score field
textAreas.forEach(function(taElem) {
taElem.on("input", countValidNumbers);
});
scoreElem.on("input change", countValidNumbers); // Keep listening to score changes

// Ensure validation runs on form load/initialization
countValidNumbers();
}
}

</script>

]]></ac:plain-text-body>
</ac:structured-macro>