HTML / JavaScript File Selected Check

Viewed 98

So I can't figure out how to validate my form to make sure that their is a file being selected before the user can move on. I've seen some examples, but for some reason they only work in internet explorer.

Any help would be greatly appreciated, thanks!

Here is my current HTML sheet:

<!DOCTYPE html>
<html>
<head>
<title>Upload Page</title>

<script>
function validateForm() {
    var x = document.forms["myForm"]["title"].value;
    if (x.length < 3) {
        alert("Title Needs To Be At Least 3 Characters Long");
        return false;
    }

    var y = document.forms["myForm"]["lotsoftext"].value;
    if (y.length == 0)
    {
        alert("Caption Must Not Be Empty");
        return false;
    }

}
</script>
</head>
<body>
    <h1><center><img src="Images/Drawing.png" onload="loadImage()" width="500" height="169"></center></h1>
    <center>
    <form name="myForm" action="Homepage.html" onsubmit="return validateForm();" method="GET">

    Photo Title: <input type="text" name="title">
    <br>
    <input type="file" name="upload" id="upload">
    <br><br><br>
    Caption: <textarea rows="10" cols="20" name="lotsoftext"></textarea>
    <a class="btn" href="Homepage.html"></a>
    <input type="submit" value="Upload">
</form>    
    <a href="Homepage.html">Cancel</a>
</center>
</body>
<script>
function loadImage() {
    alert("Image is loaded");
} 
</script>
</html>
2 Answers
Related