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字段

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

Answer 2

所以，我自己解決了這個問題（感謝@Mamum 的建議）

代碼現在看起來像這樣：

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

希望這可以幫助或至少激勵某人，他們最終可能會遇到同樣的情況。