How to remove the validation if the file type is not empty

Question

I am uploading the profile pic and banner image in the folder and name into the database. I have added the below 2 files and inserted them into the database and folder.

Now, I don't want to update the file but when I submit then I am getting the validation error message. I know my file type is empty and I am previewing the image.

I have to set the validation if the file is empty.

$("form[name='myprofile']").validate({
  rules: {
    file1: {
      required: true,
      extension: "png|jpe?g",
    },
    file2: {
      required: true,
      extension: "png|jpe?g",
    }

  },
  messages: {
    file1: {
      extension: "Please upload jpeg or png image",
    },
    file2: {
      extension: "Please upload jpeg or png image",
    }
  },



  submitHandler: function(form) {
    form.submit();
  }
});

input[type="file"] {
  padding-bottom: 45px;
}

<form action="process.php" method="post" name="myprofile" enctype="multipart/form-data" id="myprofile">
  <input type="file" name="file1"><br />
  <input type="hidden" name="file1" value="<?php echo $info['file1'];?>">
  <!--store image name image-->
  <img src="assets/images/<?php echo $info['file1'];?>">
  <!--Preview image-->
  <input type="file" name="file2"><br />
  <input type="hidden" name="file2" value="<?php echo $info['file2'];?>">
  <!--store image name image-->
  <img src="assets/images/<?php echo $info['file2'];?>">
  <!--Preview image-->

  <input type="submit" name="submit" value="submit">

</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>

You can dynamically change the rules and rule parameters using the `.rules()` method. Please refer to documentation on website and examples on SO. — Sparky, May 10 '21 at 13:36

score 0 · Answer 1 · answered May 09 '21 at 12:31

As value of filename is store inside hidden input you can check if the hidden input related to particular file has value or not depending on this you set required attribute true or false.

Demo Code :

$("form[name='myprofile']").validate({
  rules: {
    file1: {
      required: function() {
        //check if the hidden input related to file is empty if yes return true else false..
        return $("[type=file][name=file1]").nextAll("[type=hidden]:first").val() == ""
      },
      extension: "png|jpe?g",
    },
    file2: {
      required: function() {
        //same here
        return $("[type=file][name=file2]").nextAll("[type=hidden]:first").val() == ""
      },
      extension: "png|jpe?g",
    }

  },
  messages: {
    file1: {
      extension: "Please upload jpeg or png image",
    },
    file2: {
      extension: "Please upload jpeg or png image",
    }
  },



  submitHandler: function(form) {
    form.submit();
  }
});

input[type="file"] {
  padding-bottom: 45px;
}

<form action="process.php" method="post" name="myprofile" enctype="multipart/form-data" id="myprofile">
  <input type="file" name="file1">
  <br />
  <input type="hidden" name="file1" value="<?php echo $info['file1'];?>">
  <img src="assets/images/<?php echo $info['file1'];?>">
  <input type="file" name="file2"><br />
  <input type="hidden" name="file2" value="">
  <img src="assets/images/<?php echo $info['file2'];?>">
  <input type="submit" name="submit" value="submit">

</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>

you are talking about your html i.e : the way you have store file-name ? — Swati, May 09 '21 at 12:36
Yes, Is this the right way to use it? I mean instead of hidden field can we show the value in the file type — Naren Verma, May 09 '21 at 12:42
no you can't show value inside [file type](https://stackoverflow.com/a/1017237/10606400) like that . — Swati, May 09 '21 at 12:43
Yes, I checked. Thank you for the link. I checked your snippet. I am not getting the validation for both files. — Naren Verma, May 09 '21 at 13:15
Yes , because in my demo html code i have added `value=""` for second file just for testing so its showing this field is required for second file type . Sorry if i didn't understood your question :) — Swati, May 09 '21 at 13:19

How to remove the validation if the file type is not empty

1 Answers1