Question

以下是相关的dropzone.js脚本：

$(document).ready(function () {
  var dropzone3;
  Dropzone.autoDiscover = false;
  dropzone3 = new Dropzone('#dropform3', {
    maxFiles: 6,
  });
  $('#item-submit').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (dropzone3.getQueuedFiles().length > 0) {
      return dropzone3.processQueue();
    } 
    else {
      return $('#dropform3').submit();
    }
  });

我的表单使用dropzone.js作为图片。我目前让Jquery验证插件在文本输入上正常工作，但是如果输入中有任何错误，我想阻止提交表单。

这就是我的提交按钮的代码：

<input type="submit" name="commit" value="Upload" id="item-submit" class="btn btn-default photoform">

以下是验证脚本：

$('form#dropform3').validate({
  errorElement: "div",
  rules: { 
    'photo[title]':             {required: false, maxlength: 30},
    'photo[tag_list]':          {required: false, taglength: 20}
  }
});

我尝试使用以下方法创建if statement以禁用该按钮失败：

var isValid = $('form#dropform3').valid();
var dropbtn = $('#item-submit')
if (!isValid) {
  dropbtn.prop("disabled", true);                  
}

和

var isValid = $('form#dropform3').valid();
var dropbtn = $('#item-submit')
if (!isValid) {
  dropbtn.css("pointer-event", "none");                  
}

但是，根据this answer -

使用type =“submit”时，不需要点击处理程序，因为插件会自动捕获点击。此外，在这种情况下，您可以使用submitHandler选项包含表单有效时要运行的任何代码。

我暂时尝试将$('#item-submit').click(function(e)移至submitHandler但未成功，但收到dropzone3未定义的错误。我不知道如何组合脚本。

Answer 1

看起来我通过移动

解决了这个问题

if ($('form#dropform3').valid()) {

进入点击功能：

$('#item-submit').click(function(e) {
e.preventDefault();
e.stopPropagation();
if ($('form#dropform3').valid()) {});
}

使用带有Dropzone.js的Jquery Validation插件 - 我想禁用提交，除非有效（）

1 个答案: