SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    File upload and checkbox validation

    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 -
    Code:
    <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. #2
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    117
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    document.getElementById('#msg').innerText = "Your message here.";
    ...although I don't remember if .innerText is still valid JavaScript.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still cannot get it to work ?

    Code:
     <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. #4
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    117
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Let's try this again, and I'll try to go into more detail. (Caution: I haven't tested this code...)

    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •