javascript - Jquery如何检查所有输入是否都有值

Question

我有一个模式，用户可以在其中填写表格。当用户出于某种原因决定中止填写表单并单击关闭按钮时，用户将收到类似“您确定吗？所有数据都将丢失!”的警告

到目前为止，它工作正常，但是当没有输入任何内容并且用户关闭模式时，带有消息的警报仍然显示，我该如何避免这种情况？或者甚至更好 - 我可以批准我的验证吗？

$('#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();
           }
       }
   }
});

更新

由于很多人问，我真的只是使用了很多简单的输入字段

<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" />

这就是全部，我没有在其中任何一个上使用required

Answer 1

您可以为所有空值维护另一个变量，基于该变量您可以显示消息:

$('#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();
       }
    }
  }
});