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

Tags: javascript,jquery,html,css,html5

Problem :

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 ??

Solution :

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

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

    CSS Howto..

    Space between list, space on left side of the ul. How to remove this?

    Using CSS or Java to Show or Hide Empty Content Area

    How to Set Up a Responsive Background-Image with CSS

    How to make custom css fonts render exactly like designs

    how i can make slideshow, get information(image, title , content) from database? [closed]

    How to use a Drive hosted css to customize the receiver?

    How do I achieve this animation using javascript/jquery? [closed]

    How do I use pseudo-selectors to change a “Home” button to an icon using just CSS?

    How can I change this CSS for desktop browsers only?

    CSS: Changing div's property on another div's a:hover. Possible ? How?

    How to match an index of a CSS class with JavaScript?

    How to add text under every image?

    How to add space between table cells `td`?

    How to create readonly textbox-like structure using html (div/span) and css?

    Get the Navbar to show when hovering over header image

    gwt - How to CSS reset a GWT app?

    How do I make a div take the remaining height of a parent?

    How to draw a line with css and show text or image on it

    How do I align an inner div with the bottom of an outer div?

    How to top-level a rich:panelMenu with it's rich:outputPanel with an h:panelGrid?

    How to save css stylesheet pointer on php session?

    In a 3 column grid of a varying number of elements, how to select only the elements that appear on the last line using CSS

    How to edit the CSS of a td element through the hierarchy?

    How to make html table made by list responsive?

    How to push down absolute positioned div with CSS

    FontAwesome icon showing as black box. What CSS is needed to display icon?

    How to make footer elements (image and label) centered?

    How to make a HTML/CSS/JS iOS style slide transition? [closed]

    how do i get images to display in a rows like this using php and css?

    how to make the textarea's width fixed but keep the height flexible CSS