Jquery how to check if all inputs have values or not

Question

I have a modal, where the user can fill out a form. When the user, for some reason decides to abort filling out the form and clicks on the close button, the user will get an alert like "are you sure? all data will be lost!"

So far it works fine, but when nothing is entered and the user closes the modal, the alert with the message still shows up, how can I avoid this? or maybe even better - can I approve my validation?

$('#uploadModal [data-btn="close-modal"]').on("click", e => {
   if ($(".text-success").is(":visible")) {
       $('#uploadModal [data-dismiss="modal"]').click();
   } else {
       let validate = false;
       $("#uploadModal .form-row").each(function() {
          if (
            $("#uploadModal .form-row input").val() != "" ||
            $("#uploadModal .form-row input[type=file]").val() != "" ||
            $("#uploadModal .form-row textarea").val() != "" ||
            $("#uploadModal .form-row select").val() != "" ||
            $("#uploadModal .form-row input").attr("checked")
          )
            validate = true;
       });

       if (!validate) {
           $('#uploadModal [data-dismiss="modal"]').click();
       } else {
           if (confirm("Are you sure? All entered data will be lost")) {
               $('#uploadModal [data-dismiss="modal"]').click();
           }
       }
   }
});

UPDATE

Since many asks, I really just use a lot of simple input -fields

<input type="text" name="name" placeholder="name" />
<input type="file" name="attachment" placeholder="Files" />
<textarea name="bio" placeholder="your bio"><textarea/>
<input type="checkbox" name="current" />

thats all there is, I don't use required on any of them

Answer 1

You can maintain another variable for all the empty values, based on which you can show the message:

$('#uploadModal [data-btn="close-modal"]').on("click", e => {
  if ($(".text-success").is(":visible")) {
    $('#uploadModal [data-dismiss="modal"]').click();
  } else {
   let validate = false;
   let allEmpty = false;
   $("#uploadModal .form-row").each(function() {
      if (
        $("#uploadModal .form-row input").val() != "" ||
        $("#uploadModal .form-row input[type=file]").val() != "" ||
        $("#uploadModal .form-row textarea").val() != "" ||
        $("#uploadModal .form-row select").val() != "" ||
        $("#uploadModal .form-row input").attr("checked")
      )
        validate = true;
      else if(
        $("#uploadModal .form-row input").val() == "" &&
        $("#uploadModal .form-row input[type=file]").val() == "" &&
        $("#uploadModal .form-row textarea").val() == "" &&
        $("#uploadModal .form-row select").val() == "" &&
        !$("#uploadModal .form-row input").("checked")
      )
       allEmpty = true;
   });

   if (!validate) {
       $('#uploadModal [data-dismiss="modal"]').click();
   } else if(!allEmpty) {
       if (confirm("Are you sure? All entered data will be lost")) {
           $('#uploadModal [data-dismiss="modal"]').click();
       }
    }
  }
});

Answer 2

So, I solved it myself by doing this ( thanks to @Mamum's suggestion)

The code now looks like this:

$('#uploadModal [data-btn="close-modal"]').on("click", e => {
   if ($(".text-success").is(":visible")) {
       $('#uploadModal [data-dismiss="modal"]').click();
   } else {
       let validate = false;
       let allEmpty = false;
       $("#uploadModal").each(function() {
           if (
               $("#uploadModal .form-row input").val().length > 0 ||
               $("#uploadModal .form-row input[type=file]").val().length > 0 ||
               $("#uploadModal .form-row textarea").val().length > 0 ||
               $("#uploadModal .form-row input[type=checkbox]:checked").length
           ) {
               validate = true;
           } else if (
               $("#uploadModal .form-row input").val().length == 0 &&
               $("#uploadModal .form-row input[type=file]").val().length ==
                0 &&
               $("#uploadModal .form-row textarea").val().length == 0 &&
               $("#uploadModal .form-row input[type=checkbox]:checked")
                .length == 0
           ) {
               allEmpty = true;
           }
       });

       if (!validate) {
           $('#uploadModal [data-dismiss="modal"]').click();
       } else if (!allEmpty) {
           if (confirm("Are you sure? All entered data will be lost")) {
               $('#uploadModal [data-dismiss="modal"]').click();
           }
       }
   }
});

Hope this may help or at least inspire someone, who might end up in the same situation.