+ Start a Discussion
XXXXXX 

How do I make a inputFile field required?

I've set the attribute to required="true" and as far as I can tell it has not effect at all.

 

I added an onsubmit javascript function:

 

function validateForm() { var fileVal = document.getElementById("{!$Component.UploadForm.firstBlock.requiredElements.fileNameSection.theFile}").value; if ("" == fileVal) { alert("The File Name field is required."); return false; } var accessVal = document.getElementById("{!$Component.UploadForm.firstBlock.requiredElements.fileAccessSection.theAccess}").value; if ("" == accessVal) { alert("The File Access field is required."); return false; } var folderVal = document.getElementById("{!$Component.UploadForm.firstBlock.requiredElements.fileFolderSection.theFolder}").value; if ("" == folderVal) { alert("The Folder field is required."); return false; } }

 

 

and added this call:

 

 

 <apex:form id="UploadForm" onSubmit="return validateForm()"> 

 

I've tested the javascript function against inputText, inputTextarea, and selectList and it works just fine. I have verified that I am accessing the inputFile field using the same pattern as all other fields and have even compared the actual View Source on the form against the $Component call.

 

How can I make my inputFile field absolute required? I don't want the user to be able to submit the form without specifying a file to upload.

 

TIA,

 

John

 

 

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
XXXXXX

OK, I'm getting closer. According to the VF docs, I should be able to access the value in my input field with this:

 

document.getElementsByName("{!$Component.UploadForm.first.requiredElements.fileSection.File}")[0].value

 

Doesn't work. I am using similar calls with all of the other fields on the form, but this one doesn't work. So I go digging into the View Source and discover that the actual name of the field is this:

 

 

j_id0:UploadForm:first:requiredElements:fileSection:File:inputFile:file

 

Being a logical man, I try this:

 
document.getElementsByName("{!$Component.UploadForm.first.requiredElements.fileSection.File.inputFile.file}")[0].value

 

Doesn't work. So I ended up with this:

 

function validateForm() { var fileVal = document.getElementsByName("j_id0:UploadForm:first:requiredElements:fileSection:File:inputFile:file")[0].value; if ("" == fileVal) { alert("The File Name field is required."); return false; } }

 

 

I recognized that this is contrary to SF's guidelines -- but I couldn't find anything else that worked.

 

John

 

 

 

 

All Answers

rhsumnerrhsumner

Is it absolutely necessary to do your validation on the client side? An alternative would be to bind the fileInput filename attribute to a string in your controller, and then on you action method, check that string value and if it is empty add an error message to the page messages.

 

 

XXXXXX

I forgot to mention that -- I tried that too. Before the page can get to the controller, it throws up a VF system error page that says "File Name Is Required" and then it sends an email to me saying that the file name is required.

 

That's why I want to validate it on the client side ...

XXXXXX

OK, I'm getting closer. According to the VF docs, I should be able to access the value in my input field with this:

 

document.getElementsByName("{!$Component.UploadForm.first.requiredElements.fileSection.File}")[0].value

 

Doesn't work. I am using similar calls with all of the other fields on the form, but this one doesn't work. So I go digging into the View Source and discover that the actual name of the field is this:

 

 

j_id0:UploadForm:first:requiredElements:fileSection:File:inputFile:file

 

Being a logical man, I try this:

 
document.getElementsByName("{!$Component.UploadForm.first.requiredElements.fileSection.File.inputFile.file}")[0].value

 

Doesn't work. So I ended up with this:

 

function validateForm() { var fileVal = document.getElementsByName("j_id0:UploadForm:first:requiredElements:fileSection:File:inputFile:file")[0].value; if ("" == fileVal) { alert("The File Name field is required."); return false; } }

 

 

I recognized that this is contrary to SF's guidelines -- but I couldn't find anything else that worked.

 

John

 

 

 

 

This was selected as the best answer