所以我有一个这样的表格:
<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
<div class="text-inside">
Selectati Categoria<br><select id="sc" name="selectCat"></select><br><br>
Nume Produs<br><input id="numprod" type="text" name="input-text" /><br>
Pret Produs<br><input id="pretprod" type="number" name="input-pret" /><br><br>
<input type="file" name="file"><br><br>
<input type="submit" name="sumit" value="Send" id="imgButton" class="button" /><br><br>
</div>
</form>
我试图检查字段是否为空,以防止用户提交空字段,因此我使用了以下命令:
$('#uploadimage').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
var name= $('#numprod').val();
var pret = $('#pretprod').val();
if(name && pret){
$.ajax({
url: 'connect.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(){
alert('uploaded successuflly!');
}
});
}else{alert('input fields cannot be left empty you num num!');}
}));
但我仍然可以提交没有选择的文件和 AJAX 是不是重新加载页面了。任何建议,我该怎么办?
5条答案
按热度按时间bvhaajcl1#
简而言之,您无法可靠地检查
FormData
是否包含信息(正如您最初的问题所问的那样)。在Chrome和Firefox中,您可以使用
FormData.entries()
来检索信息,但旧版浏览器不支持这些,IE当然也不支持。另一种方法是直接验证表单元素--就像您正在做的那样--除了您遗漏了
file
输入之外。还要注意,您应该删除async: false
,因为使用它是一个非常糟糕的做法。要修复代码,请检查
if
条件中file
输入的val()
:wfveoks02#
由于这是Google搜索结果中排名靠前的一个,所以对于任何想快速检查FormData对象是否为空的人来说,
FormData.entries()
将返回一个迭代器,如果在该迭代器上使用.next()
方法,你会得到一个属性为done
和value
的对象,因此你可以检查done
属性来确定迭代器是否没有条目。这满足了我的需求:以及沙箱概念验证:https://codesandbox.io/s/16v99w3o4(检查控制台)
6ojccjat3#
向类型为file的输入添加一个ID,并检查它是否包含具有以下代码段的文件:
wfveoks04#
amrnrhlw5#
我认为您还可以将数据转换为字符串并检查长度。
没有长度,没有数据。