views:

435

answers:

3

I have a form with an input type=file. Internet Explorer lets the user type anything they want into that input (whereas Firefox brings up a file chooser). If the user enters a blatantly invalid name, for example:

a

and tries to submit the form, Internet Explorer does not even try to submit the form.

Is there any way for me to know that this has happened and let user know this is happening with an alert?

+1  A: 

You should add an "onclick()" event to the submit button which calls a JavaScript function that tests for your condition and uses a JavaScript "alert" to let the user know that they need to enter something worthy of submitting.

Look into Regular Expressions for your tests.

If you want the user to make a decision, use a confirm().

If you want to simply alert them and not test their value, you can use something like:

<input type="submit" value="clickme" onClick="if (confirm('Really submit?')) { this.form.submit(); }">

Here's some sample code that will get you the value from a JavaScript function call within an onclick():

<html>
    <head>
        <title>hello world</title>
        <SCRIPT LANGUAGE="javascript" type="text/javascript">
            function show_me(form_elem) {
            alert(form_elem.value);
            }
        </script>
    </head>
    <body>
        <form method="GET" name="upload_form" action="index.html" target="_top">
            <input type="file" name="file_name" size="14" maxlength="256" value="">
            <br>
            <input type="submit" value="mybutton" onclick="show_me(this.form.file_name)" />
        </form>
    </body>
</html>
madcolor
javascript does not have access to the value of an <input type=file> for security purposes.
tj111
@tj111: JavaScript can read the value of an <input type=file> in every major browser, it can't set it for security purposes.
Grant Wagner
Agreed.. my revised answer has the proof.
madcolor
It also won't necessarily read the whole filename... “a” might well be perfectly valid, there's nothing you can really do to ‘validate’ a filename other than check it's not an empty string.
bobince
Also putting the validation in the submit button click is unreliable as forms can be submitted other ways. And calling submit() in the event itself can cause a broken double submission. Have form.onsubmit return true to allow, or false to deny, a submission.
bobince
A: 

You could mimic the Firefox behaviour with the following:

<input type="file" name="test" onkeypress="this.click();return false;">

When the user tries to type in the file input, it pops up the file chooser.

Obviously this won't work if the client has JavaScript disabled, but depending on your requirements, it might be "good enough".

Appears to work okay in IE 6, 7 and 8.

It works okay in Firefox 3 (since it doesn't allow typing in an <input type=file>).

It works okay in Safari for Windows 3 & 4 (since it doesn't allow typing in an <input type=file>).

In Opera 9 (which allows typing in an <input type=file>) it doesn't do anything (doesn't pop up the chooser or swallow the keypresses). The onkeypress event doesn't seem to fire at all actually, probably for security.

In Firefox 2 it does not work (which allows typing in an <input type=file>) because this.click() doesn't pop up the chooser and return false swallows the keypresses.

Grant Wagner
For me, in IE6, calling .click() on a file input field breaks the form. You can choose a file OK, but the form then won't submit, in the same way the OP is talking about.
bobince
A: 

I found a better way to do this: http://www.priddypictures.co.uk/reference/fileInputProblem.htm

So, if those guys/gals are right, and form submits fine if the input does not have a name attribute then:

  • write a jQuery plug-in that will (if Internet Explorer) remove the name attribute from all file inputs
  • insert another hidden input into the form with a correct name
  • copy the value from file input to hidden input

I might write this plug-in at some point.

mkoryak