Question

How does one make a file upload conditionally required?

Forms Version 10

Updated July 31, 2017

asked on July 31, 2017

I'm trying to make a File Upload optional or required based on the content of another field, but I can't quite figure it out. I've got this much working:

  if($('.RequiredDoc input').val() == '') {
    $('.DocUpload .cf-label').text('Supporting Documentation');
    $('.DocUpload label .cf-required').remove();
  } else {
    $('.DocUpload .cf-label').text($('.RequiredDoc input').val());
    $('.DocUpload label').append('<span class="cf-required">*</span>');
  }

but the rest seems to be more complicated than adding " .prop('required',true); " somewhere.

1 0

Answer

SELECTED ANSWER

replied on July 31, 2017

My results weren't replicating the default behavior, but that may have been related to the prop vs. attr thing (trying to learn js/jquery at the same time as laserfiche is an adventure). I'm still not sure why the attribute looks different on the two inputs, nor why the attribute will sometimes show up in the hidden field in .files, but using the code below appears to behave properly:

  if($('.RequiredDoc input').val() == '') {
    $('.DocUpload .cf-label span span:first').text('Supporting Documentation');
    $('.DocUpload label .cf-required').hide();
    $(".DocUpload input[type='file']").removeAttr('required');
    $(".DocUpload input[type='button']").removeAttr('required');
    $('.DocUpload .parsley-errors-list').hide();
  } else {
    $('.DocUpload .cf-label span span:first').text($('.RequiredDoc input').val());
    $('.DocUpload label .cf-required').show();
    $(".DocUpload input[type='file']").attr('required',true);
    $(".DocUpload input[type='button']").attr('required',true);
    $('.DocUpload .parsley-errors-list').show();
  }

0 0

Replies

replied on July 31, 2017

I have had success with just making it a required field then using hide/show rules to hide it until a certain field on the form is filled in. Then it shows the upload field and it is required. To this point, as long as the field is hidden, I can have it required but not actually stop the process if it is not filled in.

1 0

replied on July 31, 2017

That'd work great if I didn't want an option to upload documents when not required. I guess I could use two separate uploads, one required and one not, and show one or the other, as long as that wouldn't cause issues saving into the repository.

1 0

replied on July 31, 2017 • Show version history

What are the exact conditions you're looking for?

As far as toggling between required and not required, the following works for my form (mine is based on whether or not any files have been uploaded)

function updateRequiredFields(input, count) {
  if(count > 0){
    $(field + ' textarea').removeAttr('required');
    $(field + ' textarea').attr('class', 'cf-medium user-success');
    $(field + ' .ws-errorbox').hide();
    $(field + ' .cf-required').hide();
  } else {
    $(field + ' textarea').attr('required', 'true');
    $(field + ' .ws-errorbox').show();
    $(field + ' .cf-required').show();
  }
}

In this example, my target field is a textarea (multi-line). When a user uploads or removes a file, I call the updateRequiredFields method, and pass it two parameters, the parent element (#q1, #q14, or if you have a custom class assigned to the target you can use that) and the count of how many files are attached.

If there is at least 1 file, it removes the required attribute (NOTE: this is attr, not prop), and I hide the required indicatior; this is important because hiding it means we can just use .show() to bring it back instead of recreating the DOM element.

An easy way to get the uploaded file counts is to count how many "a" elements exist in that field, but that's not the only way.

For example:

$('.RequiredDoc a').length

$('.DocUpload a').length

Depend which one is the File Upload element

0 0

replied on July 31, 2017

if($('.RequiredDoc input').val() == '') {

^ is the condition--if the input is empty, no documents are required. If the input has text, then the file upload label is set to that text, and a document must be uploaded.

I'm just struggling with what to change in the fileuploader to make it required or not. I see 'required="required"' on the file input and 'required="True"' on the button input, but it changes after a file is uploaded. Then it changes to something different if that file is deleted.

0 0

replied on July 31, 2017

Gotcha, I was thinking the other way around. Okay, so what results are you getting exactly when you test this? Is it not doing anything? Is it not making it required? Is it not removing the requirement? Etc.

When I add/remove the required attribute (the button and the input) everything is working as expected. However, there's some back-end stuff there too, like 'data-parsley-validate-if-empty="true"' so you'll want to set it as required by default, then update it on form load to avoid having to manually add those data fields.

Also, did you try using .attr() and .removeAttr() instead of .prop()? I don't see anything in your original code that would actually change the attribute value of the input or button.

0 0

SELECTED ANSWER

replied on July 31, 2017

  if($('.RequiredDoc input').val() == '') {
    $('.DocUpload .cf-label span span:first').text('Supporting Documentation');
    $('.DocUpload label .cf-required').hide();
    $(".DocUpload input[type='file']").removeAttr('required');
    $(".DocUpload input[type='button']").removeAttr('required');
    $('.DocUpload .parsley-errors-list').hide();
  } else {
    $('.DocUpload .cf-label span span:first').text($('.RequiredDoc input').val());
    $('.DocUpload label .cf-required').show();
    $(".DocUpload input[type='file']").attr('required',true);
    $(".DocUpload input[type='button']").attr('required',true);
    $('.DocUpload .parsley-errors-list').show();
  }

0 0

You are not allowed to follow up in this post.

Question

Question

How does one make a file upload conditionally required?

Answer

Replies

Sign in to reply to this post.