如何使用 jquery 验证输入文件类型 onclick 提交？答案

【问题标题】：How to validate input file type onclick submit using jquery?如何使用 jquery 验证输入文件类型 onclick 提交？
【发布时间】：2020-04-02 10:27:11
【问题描述】：

在这段代码中，我只想验证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>

【问题讨论】：

echo 是 PHP 关键字，而不是 JS。它会导致错误，这可能会导致验证不起作用。
作为对 Rory 的评论，您最可能想要的是 alert("successful")

标签： javascript php jquery validation

【解决方案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
    }
  });
});

【讨论】：

实际上，我在pancard_img 中获得了动态值，但它仍然显示not empty message @DharaParmar

【解决方案2】：

从提交处理程序中删除回显并将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>

【讨论】：