Question

我创建了一个函数来验证文件是否上传。当文件没有上传时，表格不应该提交，但是当文件上传时，它应该提交。

但是当我上传文件时，我仍然会收到我必须上传文件的错误。

这是我正在使用的jQuery代码：

$("#btnSave").click(function () {      
    var vidFileLength = $("#videoUploadFile")[0].files.length;
    if(vidFileLength === 0){
        $("#formType").submit(function(e){
        alert('Selecteer een afbeelding!');
        e.preventDefault();
        });
    }
});

以下是表格：

<form action="php/edit.php?id=type" method="post" id="formType">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Website bewerken</h4>
      </div>
      <div class="modal-body">
       <div class="form-group">
            <label>Type ID</label>
            <input type="text" id="typeId" name="typeid" class="form-control" readonly="readonly">
        </div>
        <div class="form-group">
            <label>Type Naam</label>
            <input type="text" id="typeNaam" name="typenaam" class="form-control" >
        </div>
        <div class="form-group">
            <label>Type Waarde</label>
            <input type="text" id="typeWaarde" name="typewaarde" class="form-control" >
        </div>
        <div class="form-group">
            <label>Type Afbeelding</label>
            <input class="input-group" type="file" id="videoUploadFile" name="user_image" accept="image/*" />
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" id="btnSave" name="submit" class="btn btn-primary">Save changes</button>
      </div>
    </form>

谢谢你的时间！

Answer 1

问题是因为您在submit条件中添加了if事件处理程序，因此一旦表单再次生效，旧的提交处理程序将停止提交。

要解决此问题，您需要将逻辑更改为始终在submit处理程序上执行，并使用preventDefault()在文件不存在时停止提交。试试这个：

$('#formType').submit(function(e) {
  var vidFileLength = $("#videoUploadFile")[0].files.length;
  if (vidFileLength === 0) {
    alert('Selecteer een afbeelding!');
    e.preventDefault();
  }
});

即使上传文件，jQuery也不会发送表单

1 个答案: