Apex Code Development You need to sign in to do that
Don't have an account?
Alex Wong 4 Can apex:inputFile have the html5 validation function?
My web page is a form using html5 validation to check blank. All field in my form can use html5 to perform validation, except the inputFile field for uploading attachment. Can apex:inputFile have the html5 validation function? Or is there any way to perform validation for checking whether the attachment field is blank or not? Thanks.
Please find the solution for the above requirement.
If I'm not mistaken, an apex:inputFile does not support html- pass-through attributes. So you may need to resort to Javascript. You could either validate the value is not blank using Javascript on form submission. Or an alternative would be to set the html-required attribute on page load.
Validate with JS:
<apex:inputFile id='inputFile' value="{!attach.Body}" fileName="{!attach.name}"/> <apex:commandButton value="Submit" action="{!submit}" onclick='return test();'/> <script> function test(){ var inputFile = document.querySelectorAll("[id*='inputFile']")[0]; if(inputFile.value.length === 0) return false; return true; } </script>Set required attr:
var files = document.querySelectorAll("input[type='file']"); for(var i = 0; i < files.length; i++){ files[i].required = true; }This works perfectly for me.
Kindly mark it as solved if this helps.
Best Regards,
Nagendra.P
All Answers
Please find the solution for the above requirement.
If I'm not mistaken, an apex:inputFile does not support html- pass-through attributes. So you may need to resort to Javascript. You could either validate the value is not blank using Javascript on form submission. Or an alternative would be to set the html-required attribute on page load.
Validate with JS:
<apex:inputFile id='inputFile' value="{!attach.Body}" fileName="{!attach.name}"/> <apex:commandButton value="Submit" action="{!submit}" onclick='return test();'/> <script> function test(){ var inputFile = document.querySelectorAll("[id*='inputFile']")[0]; if(inputFile.value.length === 0) return false; return true; } </script>Set required attr:
var files = document.querySelectorAll("input[type='file']"); for(var i = 0; i < files.length; i++){ files[i].required = true; }This works perfectly for me.
Kindly mark it as solved if this helps.
Best Regards,
Nagendra.P
<script> function test(){ var inputFile = document.querySelectorAll("[id*='photo']")[0]; if(inputFile.value.length === 0) { alert("Please insert a photo of artist/ group."); return false;} else{ return true;} } </script>This is the picture of what I have achieved:However, I want to achieve this:
Is there any way to achieve this style?