You are viewing limited content. For full access, please sign in.

Question

Question

Forms - Make field required if file is uploaded

asked on January 18, 2022

Hello,

We have a situation in which we want to require a number field in Forms when a file is uploaded in an upload field. I've found a couple other posts with similar requests, but I can't seem to figure out the syntax on checking whether or not a file upload field is empty. I'm trying to use Matthew's snippet in this post, but with the requiredSource field being a file upload. 

I also tried using field rules to hide the conditionally required field until the file upload isn't empty, but it doesn't appear we can include file upload fields in field rule conditions.

Any help is appreciated. Thanks!

0 0

Replies

replied on January 18, 2022

The most straight-forward "Forms" way of doing it might be to have both operations driven by a radio-button, or checkbox.  When they select "yes" the file upload and the input field are shown and required.  This doesn't use JS, so it will still work in version 11.

0 0
replied on January 18, 2022

Hi James,

Thanks for your reply. I should have provided a more thorough explanation of this process - I left some details out that explain this a little better.

This form gets filled out over the course of a couple hours, sometimes over the course of an entire day/overnight. We allow the user to submit the form as many times as they want - it gets routed back to their inbox until we have all the data we need. However, when the user gets to a certain point at the end of the process, they receive a piece of paper that we need them to take a picture of and upload to the form - at that point, we want to make another field required. 

So regardless, these fields will eventually be filled out, but we want to make a specific field required once they've uploaded a file. I get what you're saying with the radio button or checkbox, but the user will need to fill out these fields regardless, so having to click on a radio button or checkbox to show this field could be redundant. I wish it was as simple as just making these 2 fields required regularly with the Forms designer, but the user will not have that information until the end of the process, and they didn't like the idea of two different buttons at the bottom of the form ('submit' and 'save as draft'), so we went the route of just re-assigning the task to the user until we have all the data we need.

0 0
replied on January 19, 2022

OK, well I've been looking, and I can't find what event is triggered when a file is added to the table.files or tr.file container.  If somebody can identify that event then a handler can be written to make the numeric field required.

1 0
replied on January 25, 2022 Show version history

You will need to check the number of files uploaded whenever the fileuploadvalidate event triggers or when the click the delete 'button' on one of the uploaded files. Because of how you are looping them back to the form as they edit it you will also most likely need to check when they first load the page as well. 

We gave our upload button the class name of 'upload'. To figure out how many files were uploaded we counted the number of times the delete 'button' was active.  We also added a hidden field that we use to keep track of the number of files uploaded. This fields class name is checkUpload. We used it for exclusive gateways in the process because we route the form to other individuals if a file was uploaded. Because it has been a while, I'm not sure why when referencing it we went with "$('.checkUpload [vo]').val()" instead of "$('.checkUpload input').val()". 

The field we are setting as required in the function 'setRequiredDocumentWillBeVerified' is a checkbox and because of that the code to set it to required is a bit different but there is commented out code for still there for if it had been a typical input field. 

The class "doseTableField" refers to fields in a table we have that we set them to required (in the first row only) when they have uploaded a file. 

 

There is also another field that we are hiding and showing based on if a file was uploaded or not. 

/*******************************************************************************/
/*        START: set the fields in the first row of myTable to required        */
/*******************************************************************************/

function setRequiredMyTableFirstRow(isRequired) { 
  /* find the fields that the required attribute is to be modified         */
  /* Each field's input/select                                             */
  /* NOTE: On the layout tab, the fields are set to not required           */
   
  var manufacturerTableFieldSelect = $('.manufacturerTableField select').eq(0);
  var doseTableFieldSelect = $('.doseTableField select').eq(0);  
  var dateTableFieldInput = $('.dateTableField input').eq(0);

  if(isRequired)  {
    /* set the attributes to required */
    manufacturerTableFieldSelect.attr('required', 'True'); 
    doseTableFieldSelect.attr('required', 'True');   
    dateTableFieldInput.attr('required', 'True');  
  } else { 
    /* Hide remove the required attributes  */
    manufacturerTableFieldSelect.removeClass('required').removeAttr('required'); 
    doseTableFieldSelect.removeClass('required').removeAttr('required');   
    dateTableFieldInput.removeClass('required').removeAttr('required'); 
  };  
}; /* END: function setRequiredMyTableFirstRow(isRequired)  */
  
/*******************************************************************************/
/*         END: set the fields in the first row of myTable to required         */
/*******************************************************************************/

/*******************************************************************************/
/*           START: set documentWillBeVerified required/not required           */
/*******************************************************************************/

function setRequiredDocumentWillBeVerified(isRequired) {  
  
  /* find the fields that the required attribute is to be modified         */
  /* Each field's input and the span                                       */
  /* the span holds the asterix that is displayed when required            */
  /* NOTE: On the layout tab, the fields are set to not required           */
  var documentWillBeVerifiedSpan = $('.documentWillBeVerified span.cf-required');
  var documentWillBeVerifiedLabel = $('.documentWillBeVerified .cf-label');
  //var documentWillBeVerifiedInput = $('.documentWillBeVerified input');
  /* used for checkboxes */ 
  var documentWillBeVerifiedInput = $('.documentWillBeVerified span.choice input:checkbox');    
  
  /* Remove span immediately before adding it. It won't remove it if it    */
  /* doesn't exist, but will if it does - you always start with a clean    */
  /* state right before adding it                                          */  
  documentWillBeVerifiedSpan.remove();
  documentWillBeVerifiedLabel.append('<span class="cf-required">*</span>');  
  documentWillBeVerifiedSpan = $('.documentWillBeVerified span.cf-required');     
  
  
  if(isRequired)  {
    documentWillBeVerifiedSpan.show();
    documentWillBeVerifiedInput.attr('required', 'True');     
  } else { 
    /* Hide the asterisks and remove the required attributes  */
    documentWillBeVerifiedSpan.hide();
    documentWillBeVerifiedInput.removeClass('required').removeAttr('required');
  };
}; /* END: function setRequiredDocumentWillBeVerified */
/*******************************************************************************/
/*            END: set documentWillBeVerified required/not required            */
/*******************************************************************************/




$(document).ready(function () {
    if($('.checkUpload [vo]').val() == (0))  {  
       	$('#q132').hide();
    };
});
  
$(document).on("fileuploadvalidate", ".upload", function (e) {
  $('.checkUpload [vo]').val($('.upload .file-del').length);
	if($('.checkUpload [vo]').val() > (0))  {  
       	$('#q132').show();
      	setRequiredDocumentWillBeVerified(true);
      	setRequiredMyTableFirstRow(true);

     };
});

$(document).on("click", ".deleteFileBtn", function (e) {
  $('.checkUpload [vo]').val($('.upload .file-del').length);
      if($('.checkUpload [vo]').val() == (0))  {  
       	$('#q132').hide();
        setRequiredDocumentWillBeVerified(false);
        setRequiredMyTableFirstRow(false);
    };
});

 

I hope this helps. 

 

EDIT: 
It should be noted, fileuploadvalidate is not called in preview mode so you will need  to publish in order to test

3 0
replied on May 16, 2022

I believe that the suggestion by James would still work. For that specific upload field, have a radio button that asks if they have the required document to upload, if yes, make the additional field required. The question doesn't have to be asked of any other fields, just the one, unless I'm misunderstanding.

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.