1

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.

1 Answer 1

1

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;
}

Hope this helps!

3
  • 1
    Thanks for your help. It works, but I want to ask one more question. Besides alert, is there any way to pop up a message? Is there any method to somehow "copy" the format of html5 validation error message? Aug 18, 2016 at 4:11
  • @alexwong820 I'm not sure I understand what you mean by 'copy' the format of the validation error. If you want to customize the message you could use files[i].setCustomValidity(ERROR_MESSAGE_HERE) . And that will display whatever string you pass in if the field fails validation. Is that what you were looking for? Aug 18, 2016 at 13:26
  • files[i].setCustomValidity(ERROR_MESSAGE_HERE) Where can I put the above code in my code? Because I am not sure about the usage. Aug 19, 2016 at 1:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .