Old Javascript Help

asked on June 2 • Show version history

Hi all,

Stuck with fixing an older form, that has some Javascript using the classic designer. Its time sensitive so I am struggling to get my head around Javascript at the same time.

I've stripped it back to better understand, the idea was to make a field mandatory, we tried to do this via rules and then ended up using Javascript. So right now I am just trying to set the date fields mandatory depending on the option

function showHideFields() {
  var val1 = document.getElementById('Field1')?.value || '';
  var val2 = document.getElementById('Field2')?.value || '';
  var val5 = document.getElementById('Field5')?.value || '';

  console.log('val1:', `"${val1}"`, 'val2:', `"${val2}"`, 'val5:', `"${val5}"`);

  if (val2 === 'New Employee Contract' && val5 === 'Teachers' && (val1 === 'Step 1.1' || val1 === 'Step 1.2')) {
    console.log('Condition 1 met');
    toggleFieldVisibility('Field6', true);
    toggleFieldVisibility('Field7', false);
    toggleFieldVisibility('Field4', true);
    toggleFieldVisibility('Field3', false);
  }
  else if (val2 === 'New Employee Contract' && val5 === 'Teachers' && (val1 !== 'Step 1.1' && val1 !== 'Step 1.2')) {
    console.log('Condition 2 met');
    toggleFieldVisibility('Field6', true);
    toggleFieldVisibility('Field7', false);
    toggleFieldVisibility('Field3', true);
    toggleFieldVisibility('Field4', false);
  }
  else if (val2 !== 'New Employee Contract' && val5 === 'Teachers') {
    console.log('Condition 3 met');
    toggleFieldVisibility('Field7', true);
    toggleFieldVisibility('Field6', false);
    toggleFieldVisibility('Field4', true);
    toggleFieldVisibility('Field3', false);
  }
  else {
    console.log('Else condition met');
    toggleFieldVisibility('Field6', true);
    toggleFieldVisibility('Field7', false);
    toggleFieldVisibility('Field3', true);
    toggleFieldVisibility('Field4', false);
  }
}

function toggleFieldVisibility(fieldId, show) {
  var input = document.getElementById(fieldId);
  if (!input) return;
  var li = input.closest('li');
  if (li) {
    li.style.display = show ? '' : 'none';
  } else {
    // fallback: hide input itself
    input.style.display = show ? '' : 'none';
  }
}

// Setup event listeners
document.addEventListener('DOMContentLoaded', function () {
  ['Field1', 'Field2', 'Field5'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.addEventListener('change', showHideFields);
  });
  showHideFields();
});

I got the show hide functionality working conditional logic working but now I just want to set a fields mandatory

I've been looking here for a reference but am a little over my head. My main question is how to reference a field to set its mandatory attribute e.g proficency_man in this example.

https://doc.laserfiche.com/laserfiche/en-us/Content/Resources/BusinessProcesses/Javascript-and-CSS/Customizing%20Required%20Fields.htm?TocPath=Process%20Automation%7CBusiness%20Processes%7CCreating%20a%20New%20Form%7CCustomizing%20a%20Classic%20Form%20with%20CSS%20and%20Javascript%7C_____6

Thanks

0 0

SELECTED ANSWER

replied on June 2

When you say mandatory - do you mean required?

If you have a field that you want occassionally required and occassionally optional, you can use JQuery code like this:

//Make the field with ID # Field6 required.
$('#Field6').attr('required', 'true');
$('#Field6').addClass('required');

//Make the field with ID # Field3 optional.
$('#Field3').removeAttr('required');
$('#Field3').removeClass('required');

Those don't add the * at the end of the label, but it should enforce the required status upon submission.

If you really want the * on the label, something like this will probably work.

//Make the field with ID # Field6 required.
$('#Field6').attr('required', 'true');
$('#Field6').addClass('required');
$('#q6 .cf-required').remove();   //Remove before adding to prevent duplications.
$('#q6 .cf-label').append('<span class="cf-required">*</span>');

//Make the field with ID # Field3 optional.
$('#Field3').removeAttr('required');
$('#Field3').removeClass('required'); 
$('#q3 .cf-required').remove();

That all said - if you can migrate to the Layout Designer where field rules are much more powerful, includes conditional groups, and can handle both hiding/showing and making fields required/optional - you're life will be easier for it.

1 0

Question

Question

Answer

Replies

Sign in to reply to this post.