jquery 检查FormData是否为空

sy5wg1nm  于 2023-01-04  发布在  jQuery
关注(0)|答案(5)|浏览(229)

所以我有一个这样的表格:

<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 是不是重新加载页面了。任何建议,我该怎么办?

bvhaajcl

bvhaajcl1#

简而言之,您无法可靠地检查FormData是否包含信息(正如您最初的问题所问的那样)。
在Chrome和Firefox中,您可以使用FormData.entries()来检索信息,但旧版浏览器不支持这些,IE当然也不支持。
另一种方法是直接验证表单元素--就像您正在做的那样--除了您遗漏了file输入之外。还要注意,您应该删除async: false,因为使用它是一个非常糟糕的做法。
要修复代码,请检查if条件中file输入的val()

$('#uploadimage').on('submit', function(e) {
    e.preventDefault();
    var name = $('#numprod').val().trim();
    var pret = $('#pretprod').val().trim();
    var file = $('input[type="file"]').val().trim(); // consider giving this an id too

    if (name && pret && file) {
        $.ajax({
            url: 'connect.php',
            type: 'POST',
            data: new FormData(this),
            cache: false,
            contentType: false,
            processData: false,
            success: function(){
                alert('uploaded successuflly!');
            }
        });
    } else {
        alert('input fields cannot be left empty you num num!');
    }
});
wfveoks0

wfveoks02#

由于这是Google搜索结果中排名靠前的一个,所以对于任何想快速检查FormData对象是否为空的人来说,FormData.entries()将返回一个迭代器,如果在该迭代器上使用.next()方法,你会得到一个属性为donevalue的对象,因此你可以检查done属性来确定迭代器是否没有条目。这满足了我的需求:

formDataObject.entries().next().done

以及沙箱概念验证:https://codesandbox.io/s/16v99w3o4(检查控制台)

6ojccjat

6ojccjat3#

向类型为file的输入添加一个ID,并检查它是否包含具有以下代码段的文件:

if(document.getElementById("file").files.length == 0 ){
    console.log("no files selected");
}
wfveoks0

wfveoks04#

formData.has('username'); // Returns false
formData.append('username', 'Chris');
formData.has('username'); // Returns true
amrnrhlw

amrnrhlw5#

我认为您还可以将数据转换为字符串并检查长度。

surveyData.toString().length

没有长度,没有数据。

相关问题