skip to Main Content

I’m trying to validate the input file field if it is empty or not but its not working.
I’m having multiple form tags on my page so i need to check if the current submitted form’s file input is empty or not.

$(document).ready(function() {
    $("form").on('submit', function(e) {
        e.preventDefault();
        var fileInput = $(this).find('input[type="file"]');
        console.log(fileInput);
        if (fileInput.length === 0) {
            alert("Please select a file to upload.");
            return;
        }
    });
});

html

<div id="content">
   <div style="padding:1% 0">
        <table>
            <thead>
                <tr>
                    <td>Type</td>
                    <td>Select Files</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <form method="post" enctype="multipart/form-data">
                    <input type="hidden" name="recID" value="">
                    <td>File 1</td>
                    <td><input type="file" name="file1" class="fileinput"></td>
                    <td><input type="submit" name="submit" value="Upload"></td>
                    </form>
                </tr>
                <tr>
                    <form method="post" enctype="multipart/form-data">
                    <input type="hidden" name="recID" value="">
                    <td>File 2</td>
                    <td><input type="file" name="file2" class="fileinput"></td>
                    <td><input type="submit" name="submit" value="Upload"></td>
                    </form>
                </tr>
                <tr>
                    <form method="post" enctype="multipart/form-data">
                    <input type="hidden" name="recID" value="">
                    <td>File 3</td>
                    <td><input type="file" name="file3" class="fileinput"></td>
                    <td><input type="submit" name="submit" value="Upload"></td>
                    </form>
                </tr>
                <tr>
                    <form method="post" enctype="multipart/form-data">
                    <input type="hidden" name="recID" value="">
                    <td>File 4</td>
                    <td><input type="file" name="file4" class="fileinput"></td>
                    <td><input type="submit" name="submit" value="Upload"></td>
                    </form>
                </tr>
                <tr></tr>
                <tr><td colspan="3"><a href="back.php"><button type="button">Go Back</button></a></td></tr>
            </tbody>
        </table>
</div>

I tried multiple time by all methods but not working.

3

Answers


  1. Make sure that you are not used form inside another form. it will conflict when place a form inside another form.

    Login or Signup to reply.
  2. Value for files can be accessed under .files. You need to rectify the condition to check the length as below,

    $(document).ready(function() {
      $("form").on('submit', function(e) {
        e.preventDefault();
        var fileInput = $(this).find('input[type="file"]');
        if (typeof(fileInput[0]) !== "undefined" && fileInput[0].files.length === 0) {
          alert("Please select a file to upload.");
          return;
        }
      });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form>
      <input type="file" id="file-upload" />
      <input type="submit" />
    </form>
    <form>
      <input type="file" id="file-upload1" />
      <input type="submit" />
    </form>
    <form>
      <input type="text" />
      <input type="submit" />
    </form>

    Update:

    In case of multiple forms where input type file is missing, it will throw undefined error. To resolve that add a check typeof(fileInput[0]) !== "undefined" in the condition.

    Login or Signup to reply.
  3. Check the value as below

    if (fileInput.val() === '') {
        alert("Please select a file to upload.");
        return;
     }
    
    

    @Updated as per the modified question. You need to restructure HTML table

    $(document).ready(function() {
      $("form").on('submit', function(e) {
        e.preventDefault();
        var fileInput = $(this).find('input[type="file"]');
        if (fileInput.val() === '') {
          alert("Please select a file to upload.");
          return;
        }
      });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
      <thead>
        <tr>
          <th>Type</th>
          <th>Select Files</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>File 1</td>
          <td>
            <form method="post" enctype="multipart/form-data" id="form1">
              <input type="hidden" name="recID" value="">
              <input type="file" name="file1" class="fileinput">
            </form>
          </td>
          <td>
            <input type="submit" name="submit" value="Upload" form="form1">
          </td>
        </tr>
        <tr>
          <td>File 2</td>
          <td>
            <form method="post" enctype="multipart/form-data" id="form2">
              <input type="hidden" name="recID" value="">
              <input type="file" name="file2" class="fileinput">
            </form>
          </td>
          <td>
            <input type="submit" name="submit" value="Upload" form="form2">
          </td>
        </tr>
        <tr>
          <td>File 3</td>
          <td>
            <form method="post" enctype="multipart/form-data" id="form3">
              <input type="hidden" name="recID" value="">
              <input type="file" name="file3" class="fileinput">
            </form>
          </td>
          <td>
            <input type="submit" name="submit" value="Upload" form="form3">
          </td>
        </tr>
        <tr>
          <td>File 4</td>
          <td>
            <form method="post" enctype="multipart/form-data" id="form4">
              <input type="hidden" name="recID" value="">
              <input type="file" name="file4" class="fileinput">
            </form>
          </td>
          <td>
            <input type="submit" name="submit" value="Upload" form="form4">
          </td>
        </tr>
        <tr>
          <td colspan="3">
            <a href="back.php">
              <button type="button">Go Back</button>
            </a>
          </td>
        </tr>
      </tbody>
    </table>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search