File upload and checkbox validation

JavaScript
1

Hello, I’m creating a form which includes a file uploader and multiple checkboxes.

So far i’ve managed to validate the form using alert() but i would like to replace the alert message with an error message which displays on top of the form.

Here is what i have so far -

<script type="text/javascript">
        function validateproject()
        {
            valid = true;
            if(document.input.status.checked == false) {

    alert ("Please select checkbox")
                valid = false;

}
            if(document.input.status2.checked == false) {

    alert ("Please select the second checkbox")
                valid = false;

}

               if(document.input.uploaded.value == "")
                {
                alert ("Please attach a file to be uploaded")
                valid = false;
                }
            return valid;
        }
    </script>
<body id="wrapper">

                <form name="input" action="testvalidation.html" enctype="multipart/form-data" method="post" onsubmit="return validateproject();">
                    <table>
                                           <tr>
                            <th>checkbox:</th>
                            <td>
                                       <input class="uploadform" id="original" type="checkbox" name="status" value="true">please check this box<br >
                            </td>
                            </tr>
                                                                       <tr>
                            <th>checkbox2:</th>
                            <td>
                                       <input class="uploadform" id="original2" type="checkbox" name="status2" value="true">please check the second box<br >
                            </td>
                            </tr>
                            <tr>
                            <th>
                                Upload File
                            </th>
                            <td>
                                <input type="file" name="uploaded" id="uploaded">
                            </td>
                        </tr>
                </table>
                <br>
                <input style='font-size:2em;' type="submit" value="Upload" name="upload">
        </form>
</body>

Can anyone help me display the error messages?

2

Quickest and easiest way I can think of is to insert an empty <div> or <span> with id=“msg”. Then, instead of firing an alert statement, you could insert your error message into the <div> or <span> with something like


document.getElementById('#msg').innerText = "Your message here.";

…although I don’t remember if .innerText is still valid JavaScript. :-\

3

I still cannot get it to work :confused:?

 <script type="text/javascript">
        function validateproject()
        {
            valid = true;
            if(document.input.status.checked == false) {

    document.getElementById('#msg').innerText = "Your message here.";
                    valid = false;

}
            if(document.input.status2.checked == false) {

    alert ("Please select the second checkbox")
                valid = false;

}

               if(document.input.uploaded.value == "")
                {
                alert ("Please attach a file to be uploaded")
                valid = false;
                }
            return valid;
        }
    </script>
<body id="wrapper">
              <div id="msg"></div>
                <form name="input" action="testvalidation.html" enctype="multipart/form-data" method="post" onsubmit="return validateproject();">
                    <table>
                                           <tr>
                            <th>checkbox:</th>
                            <td>
                                       <input class="uploadform" id="original" type="checkbox" name="status" value="true">please check this box<br >
                            </td>
                            </tr>
                                                                       <tr>
                            <th>checkbox2:</th>
                            <td>
                                       <input class="uploadform" id="original2" type="checkbox" name="status2" value="true">please check the second box<br >
                            </td>
                            </tr>
                            <tr>
                            <th>
                                Upload File
                            </th>
                            <td>
                                <input type="file" name="uploaded" id="uploaded">
                            </td>
                        </tr>
                </table>
                <br>
                <input style='font-size:2em;' type="submit" value="Upload" name="upload">
        </form>
</body>
4

Let’s try this again, and I’ll try to go into more detail. (Caution: I haven’t tested this code…)


 <script type="text/javascript">
        function validateproject()
        {
            valid = true;
            txtMsg = "";
            if(document.input.status.checked == false) {

    // Not here...
    //document.getElementById('#msg').innerText = "Your message here.";
                    valid = false;
                    txtMsg = "Some error message.";  // Set whatever message is appropriate here

}
            if(document.input.status2.checked == false) {

    // Not yet...
    //alert ("Please select the second checkbox")
                valid = false;
                txtMsg += "Please select the second checkbox"; // Using += to append to the txtMsg variable

}

               if(document.input.uploaded.value == "")
                {
                // Still not yet...
                //alert ("Please attach a file to be uploaded")
                valid = false;
                txtMsg += "Please attach a file to be uploaded"; // Again, appending as needed
                }
            if (valid != true) {
                  // Insert error msgs here!
                  document.getElementById('#msg').innerText = txtMsg;
            } else {              
            return valid;
            }
        }   
    </script>