Disable submit checkbox until required fields are populated

[jamesfranco28]

Hello,
I have a form built on SP 0365 using SPforms. I have a form with about 10 fields out of which 5 are required fields. There is a 'Submit' check box and user will need to check the submit box to trigger a workflow upon completion of the form.
The ask is , How do to use JS functions to disable/hide the 'Submit' check box until all the required fields are populated ?

The required fields are : 'Description' which is Multiple line text box, 'Cost' which is numeric data field and 'Sponsor' which is a Person from Active directory.

Thank you,
JamesFranco28

[Nikita Kurguzov]

Dear James,
There are many ways to do it, and how to make the code more readable, but the most straightforward option is:

Code: Select all

function checkRequiredFields(){
  if(fd.field('Description').value().length == 0){
    return false;
  }
  if(fd.field('Cost').value().length == 0){
    return false;
  }
  if(fd.field('Sponsor').value().length == 0){
    return false;
  }
  return true;
}

function showHideCheckbox(){
  if(checkRequiredFields()){
    $('.checkbox').show();
  }
  else {
    $('.checkbox').hide();
  }
}

//check all fields when one changes value:
fd.field('Description').change(function(){
  showHideCheckbox();
});
fd.field('Cost').change(function(){
  showHideCheckbox();
});
fd.field('Sponsor').change(function(){
  showHideCheckbox();
});

//check fields when form loads and sponsor field has loaded
fd.field('Sponsor').control('ready', function() {
  showHideCheckbox();
});

Make sure to use correct Internal Names for the fields, and don't forget to add checkbox CSS class to Checkbox field.

CSS class.png (2.48 KiB) Viewed 1938 times

The code might need to be adjusted, but it should work. If it doesn't - I recommend implementing it one field at a time, then adding each one and seeing if one of the fields doesn't check properly. It can be hard to pinpoint the problem with all fields at once.