如何使用jquery驗證輸入文件類型onclick提交？

Question

在這段代碼中，我只想驗證pancard_img 。 如果 pancard 圖像不為空，現在會發生什么，然后它再次顯示我'Pancard 圖像不應為空。 如果pancard_img有值。 我該如何解決這個問題？

 $(document).ready(function() { $("#submit").click(function(e) { e.preventDefault(); if (("#pancard").val() == '') { $("#err_pan").html("Pancard should not be empty"); } else if (("#pancard_img").val() == '') { $("#err_pan_img").html("Pancard image should not be empty"); } else { alert("successful"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="myform"> <input type="text" name="pancard" id="pancard" /> <div id="err_pan"></div> <input type="file" name="pancard_img" id="pancard_img" value="Pan1.png" /> <div id="err_pan_img"></div> <input type="submit" name="submit" class="btn btn-success" id="submit" value="submit" /> </form>

Answer 1

您的代碼中幾乎沒有語法錯誤，例如，

$(document).ready(function() {
  $("#submit").click(function(e) {
    e.preventDefault();
    if ($("#pancard").val() == '') { // add $
      $("#err_pan").html("Pancard image should not be empty");
    } else if($("#pancard_img").val() == '') { // add $
      $("#err_pan_img").html("Pancard image should not be empty");
    } else {
      alert("successful"); // You can use alert, echo is for php
    }
  });
});

Answer 2

從提交處理程序中刪除 echo 並將e.preventDefault()移動到條件中，這樣當輸入有值時，它不會阻止表單提交。 您也忘記在選擇元素時使用$ 。

 $(document).ready(function() { $("#submit").click(function(e) { if ($("#pancard").val() == '') { e.preventDefault(); $("#err_pan").html("Pancard image should not be empty"); } else if ($("#pancard_img").val() == '') { e.preventDefault(); $("#err_pan_img").html("Pancard image should not be empty"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="myform"> <input type="text" name="pancard" id="pancard" /> <div id="err_pan"></div> <input type="file" name="pancard_img" id="pancard_img" value="Pan1.png" /> <div id="err_pan_img"></div> <input type="submit" name="submit" class="btn btn-success" id="submit" value="submit" /> </form>