Using Jquery Validation Plugin with Dropzone.js - I want to disable submit unless valid()

Question

Here is the relevant dropzone.js script:

$(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();
    }
  }); 

My form uses dropzone.js for images. I currently have the Jquery validation plug-in working correctly on the text inputs, but I want to prevent the form from being submitted if there are any errors in the inputs.

This is what the code for my submit button looks like:

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

Here is the validation script:

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

I unsuccessfully tried to create an if statement to disable the button using:

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

and

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

However, as per this answer --

when using a type="submit", your click handler is not needed because the click is automatically captured by the plugin. Also, in that case, you would use the submitHandler option to contain any code to run when the form is valid.

I briefly tried unsuccessfully to move $('#item-submit').click(function(e) into submitHandler but received an error that dropzone3 was undefined. I do not know how to combine the scripts.

Answer 1

Looks like I solved this by moving

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

into the click function:

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