取消 JQuery 验证表单 [重复]答案

【问题标题】：Cancel JQuery Validate Form [duplicate]取消 JQuery 验证表单 [重复]
【发布时间】：2017-01-02 19:42:16
【问题描述】：

我试图在弹出的表单上设置一个取消按钮，但是当点击取消按钮时表单被提交。

我该如何：从元素中移除验证，解除绑定监听器，或者为我的表单设置一个特定的提交事件，这样当点击取消按钮时它就不会提交？

感谢您的帮助

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

【问题讨论】：

标签： javascript forms jquery-validate

【解决方案1】：

可能很明显，但我只需要将取消按钮类型设置为“按钮”。 How to prevent buttons from submitting forms

还有尚未记录的 jquery validate 的 destroy 方法。 https://github.com/jzaefferer/jquery-validation/issues/1912

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

【讨论】：