-2

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.

Improve this question
1
  • no, i checked then only i asked... Commented Jun 10, 2023 at 16:21

3 Answers 3

Reset to default
0

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

not working, the val is returning "undefined"
@AatishKumar added a working snippet
@AatishKumar Updated the snippet with your html code
@Samir please check the updated HTML code...
@AatishKumar updated answer as per your modified question
0

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

Improve this answer

5 Comments

no i'm using sepearate forms
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
getting "undefined" in file value by using fileInput.val()
send your sample code
added full html code
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.

Improve this answer

7 Comments

tried that already getting error in console log Uncaught TypeError: Cannot read properties of undefined (reading 'files')
It is working in the SO playground. Do you have other forms where input type file is not present?
Adding a check for undefined will resolve the error for forms where input type file is not present. Check my updated answer.
after selecting the file it remains "undefined"
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.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.