jquery validate if input file is not empty

Question

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.

no, i checked then only i asked... – Aatish Kumar Jun 10 '23 at 16:21 — Aatish Kumar, Jun 10 '23 at 16:21

score 0 · Answer 1 · answered Jun 10 '23 at 16:14

0

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

answered Jun 10 '23 at 16:14

Ali

3
1
2

no i'm using sepearate forms – Aatish Kumar Jun 10 '23 at 16:20
instead of checking the length of fileInput, you should check the value of the file input field using fileInput.val(). Checking the length only verifies if the file input element exists, but not if it has a selected file – Ali Jun 10 '23 at 16:24
getting "undefined" in file value by using fileInput.val() – Aatish Kumar Jun 10 '23 at 16:27
send your sample code – Ali Jun 10 '23 at 16:35
added full html code – Aatish Kumar Jun 10 '23 at 16:45

Samir Selia · Answer 2 · 2023-06-10T16:35:36.087

0

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.

edited Jun 10 '23 at 16:35

answered Jun 10 '23 at 16:22

Samir Selia

7,007
2
11
30

tried that already getting error in console log Uncaught TypeError: Cannot read properties of undefined (reading 'files') – Aatish Kumar Jun 10 '23 at 16:25
It is working in the SO playground. Do you have other forms where input type file is not present? – Samir Selia Jun 10 '23 at 16:26
Adding a check for `undefined` will resolve the error for forms where input type file is not present. Check my updated answer. – Samir Selia Jun 10 '23 at 16:29
after selecting the file it remains "undefined" – Aatish Kumar Jun 10 '23 at 16:32
It should work fine. Check my updated playground. Unless you have other criteria in your HTML/JS which you haven't shared it should resolve your issue. – Samir Selia Jun 10 '23 at 16:36
Remove `console.log` from your script – Samir Selia Jun 10 '23 at 16:43
full html code updated, please check – Aatish Kumar Jun 10 '23 at 16:47

Sai Manoj · Accepted Answer · 2023-06-10T17:26:14.427

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>

not working, the val is returning "undefined" – Aatish Kumar Jun 10 '23 at 16:26 — Aatish Kumar, Jun 10 '23 at 16:26
@AatishKumar added a working snippet – Sai Manoj Jun 10 '23 at 16:28 — Sai Manoj, Jun 10 '23 at 16:28
@AatishKumar Updated the snippet with your html code – Sai Manoj Jun 10 '23 at 16:51 — Sai Manoj, Jun 10 '23 at 16:51
@Samir please check the updated HTML code... – Aatish Kumar Jun 10 '23 at 16:58 — Aatish Kumar, Jun 10 '23 at 16:58
@AatishKumar updated answer as per your modified question – Sai Manoj Jun 10 '23 at 17:26 — Sai Manoj, Jun 10 '23 at 17:26

jquery validate if input file is not empty

3 Answers3