Angry Coder Angry Coder - 10 months ago 186
jQuery Question

How to change default message "Please enter a value with a valid mimetype." for HTML file input

I just came across the

accept
attribute of
<input type="file">
and i really like it as i see that i don't need to write seperate validation for input file type if i use this attribute. its very simple like

<input type="file" accept="image/*">
will accept only image files..

<input type="file" accept="audio/*">
will accept only audio files..

<input type="file" accept="video/*">
will accept only video files..

However i see that if i some how select a different file then i see an error message

Please enter a value with a valid mimetype.


i just want to know if it i can somehow change this error message and print it so something of my choice.. also is it possible to add some css to this error message ??

Answer Source

Try using a little bit of JavaScript magic (mark the oninvalid attribute):

<input type="file" accept="image/*" oninvalid="setCustomValidity('Please, blah, blah, blah ')"/>