Cancel JQuery Validate Form

Question

I'm trying to have a cancel button on a pop in form but the form is submitted when the cancel button is clicked.

How do I: remove validate from the element, unbind the listener, or set a specific event for submit for my form so that it doesn't submit when the cancel button is clicked?

Thanks for your help

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

score 0 · Answer 1 · edited May 23 '17 at 11:53

Probably obvious to but I just needed to set the cancel button type to 'button'. How to prevent buttons from submitting forms

There is also the destroy method for the jquery validate that is not yet documented. https://github.com/jzaefferer/jquery-validation/issues/1912

I was having problems with destroy because it was causing my page to reload, but on jsfiddle the page would not reload so be careful.

Cancel JQuery Validate Form

1 Answers1