Javascript 取消JQuery验证表单

我正在尝试在弹出表单上设置“取消”按钮，但单击“取消”按钮时表单将被提交

如何：从元素中删除validate、解除侦听器绑定，或者为我的表单设置提交的特定事件，以便在单击取消按钮时表单不会提交

谢谢你的帮助

var form = document.createElement('form')
form.className = 'feedback_form corner_style'
form.remove = function() {this.parentElement.removeChild(this)}

var label = document.createElement('label')
label.innerHTML = 'Why did this not satisfy your need?'
form.appendChild(label)
form.appendChild(document.createElement('br'))

var textarea = document.createElement('textarea')
textarea.rows = 10
textarea.cols = 50
textarea.name = 'feedback'
form.appendChild(textarea)
form.appendChild(document.createElement('br'))

var submit = document.createElement('input')
submit.innerHTML = 'Submit'
submit.name = 'submit'
submit.type = 'submit'
form.appendChild(submit)

var cancel = document.createElement('button')
cancel.innerHTML = 'Cancel'
cancel.addEventListener('click', () => {
  console.log('remove form')
  form.preventDefault()
  console.log('check 1 ')
  form.remove()
})
form.appendChild(cancel)

document.body.appendChild(form)
$(form).validate({
  debug: true,
  rules: {
    feedback: 'required'
  },
  submitHandler: () => {
    console.log('submit not_satisfied')
    $.ajax({
      url: '/not_satisfied',
      cache: false,
      data: {
        id: JSON.parse(row.dataset.extra_columns).id,
        feedback: 'NotImplimented'
      },
      error: (jqXHR, textStatus, errorThrown) => {
          console.log(String(jqXHR))
          console.log(String(textStatus))
          console.log(String(errorThrown))
          alert('Error processing request.')
      },
      success: data => {
        if (! data) alert('Could not complete request.')
      },
      complete: () => {document.dispatchEvent(new Event('only_nest_form_Submit_Complete'))}
    })
    form.remove()
  }
})

---

可能很明显，但我只需要将取消按钮类型设置为“按钮”

还有jqueryvalidate的destroy方法还没有文档记录

我在destroy上遇到了问题，因为它会导致我的页面重新加载，但是在jsfiddle上页面不会重新加载，所以要小心