Core htmx client side validation tests

• HTML5 required validation error prevents request10ms ‣

  this.server.respondWith('POST', '/test', 'Clicked!')
  var form = make('<form hx-post="/test" hx-trigger="click">' +
          'No Request' +
          '<input id="i1" name="i1" required>' +
          '</form>')
  form.textContent.should.equal('No Request')
  form.click()
  this.server.respond()
  form.textContent.should.equal('No Request')
  byId('i1').value = 'foo'
  form.click()
  this.server.respond()
  form.textContent.should.equal('Clicked!')

• Novalidate skips form validation3ms ‣

  this.server.respondWith('POST', '/test', 'Clicked!')
  var form = make('<form hx-post="/test" hx-trigger="click" novalidate>' +
          'No Request' +
          '<input id="i1" name="i1" required>' +
          '</form>')
  form.textContent.should.equal('No Request')
  form.click()
  this.server.respond()
  form.textContent.should.equal('Clicked!')

• Validation skipped for indirect form submission4ms ‣

  this.server.respondWith('POST', '/test', 'Clicked!')
  var form = make('<form hx-post="/test" hx-trigger="click">' +
          'No Request' +
          '<input id="i1" name="i1" required>' +
          '<button id="button" hx-post="/test" hx-target="form"></button>' +
          '</form>')
  form.textContent.should.equal('No Request')
  byId('button').click()
  this.server.respond()
  form.textContent.should.equal('Clicked!')

• Formnovalidate skips form validation12ms ‣

  this.server.respondWith('POST', '/test', 'Clicked!')
  var form = make('<form hx-post="/test">' +
          'No Request' +
          '<input id="i1" name="i1" required>' +
          '<button id="button" type="submit" formnovalidate></button>' +
          '</form>')
  form.textContent.should.equal('No Request')
  byId('button').click()
  this.server.respond()
  form.textContent.should.equal('Clicked!')

• HTML5 pattern validation error prevents request2ms ‣

  this.server.respondWith('POST', '/test', 'Clicked!')
  var form = make('<form hx-post="/test" hx-trigger="click">' +
          'No Request' +
          '<input id="i1" name="i1" pattern="abc" value="xyz">' +
          '</form>')
  byId('i1').value = 'xyz'
  form.textContent.should.equal('No Request')
  form.click()
  this.server.respond()
  form.textContent.should.equal('No Request')
  byId('i1').value = 'abc'
  form.click()
  this.server.respond()
  form.textContent.should.equal('Clicked!')

• Custom validation error prevents request3ms ‣

  this.server.respondWith('POST', '/test', 'Clicked!')
  var form = make('<form hx-post="/test" hx-trigger="click">' +
          'No Request' +
          '<input id="i1" name="i1">' +
          '</form>')
  byId('i1').setCustomValidity('Nope')
  form.textContent.should.equal('No Request')
  form.click()
  this.server.respond()
  form.textContent.should.equal('No Request')
  byId('i1').setCustomValidity('')
  form.click()
  this.server.respond()
  form.textContent.should.equal('Clicked!')

• Custom validation error prevents request for unticked checkboxes2ms ‣

  this.server.respondWith('POST', '/test', 'Clicked!')
  var form = make('<form hx-post="/test" hx-trigger="click">' +
      'No Request' +
      '<input id="i1" name="i1" type="checkbox">' +
      '</form>')
  byId('i1').setCustomValidity('Nope')
  form.textContent.should.equal('No Request')
  form.click()
  this.server.respond()
  form.textContent.should.equal('No Request')
  byId('i1').setCustomValidity('')
  form.click()
  this.server.respond()
  form.textContent.should.equal('Clicked!')

• Custom validation error prevents request for unselected radiogroups3ms ‣

  this.server.respondWith('POST', '/test', 'Clicked!')
  var form = make('<form hx-post="/test" hx-trigger="click">' +
      'No Request' +
      '<input id="i1" name="i1" type="radio">' +
      '</form>')
  byId('i1').setCustomValidity('Nope')
  form.textContent.should.equal('No Request')
  form.click()
  this.server.respond()
  form.textContent.should.equal('No Request')
  byId('i1').setCustomValidity('')
  form.click()
  this.server.respond()
  form.textContent.should.equal('Clicked!')

• hyperscript validation error prevents request7ms ‣

  this.server.respondWith('POST', '/test', 'Clicked!')
  var form = make('<form hx-post="/test" hx-trigger="click">' +
          'No Request' +
          '<input _="on htmx:validation:validate if my.value != \'foo\' call me.setCustomValidity(\'Nope\') ' +
          '                                      else call me.setCustomValidity(\'\')" id="i1" name="i1">' +
          '</form>')
  htmx.trigger(form, 'htmx:load')
  byId('i1').value = 'boo'
  form.textContent.should.equal('No Request')
  form.click()
  this.server.respond()
  form.textContent.should.equal('No Request')
  byId('i1').value = 'foo'
  form.click()
  this.server.respond()
  form.textContent.should.equal('Clicked!')

• calls htmx:validation:failed on failure1ms ‣

  var form = make('<form hx-post="/test" hx-trigger="click">' +
          'No Request' +
          '<input id="i1" name="i1" required>' +
          '</form>')
  var calledEvent = false
  var handler = htmx.on(form, 'htmx:validation:failed', function() {
    calledEvent = true
  })
  try {
    form.click()
    this.server.respond()
  } finally {
    htmx.off(form, handler)
  }
  calledEvent.should.equal(true)

• calls htmx:validation:halted on failure0ms ‣

  var form = make('<form hx-post="/test" hx-trigger="click">' +
          'No Request' +
          '<input id="i1" name="i1" required>' +
          '</form>')
  var errors = null
  var handler = htmx.on(form, 'htmx:validation:halted', function(evt) {
    errors = evt.detail.errors
  })
  try {
    form.click()
    this.server.respond()
  } finally {
    htmx.off(form, handler)
  }
  errors.length.should.equal(1)
  byId('i1').should.equal(errors[0].elt)
  errors[0].validity.valueMissing.should.equal(true)

• hx-validate can prevent a single input from submitting3ms ‣

  this.server.respondWith('POST', '/test', 'Clicked!')
  var div = make("<div id='d1'>No Request</div>")
  var form = make('<form><input type="text" hx-target="#d1" hx-post="/test" hx-trigger="click" id="i1" name="i1" pattern="[0-9]+" hx-validate="true"/></form>')
  var input = byId('i1')
  div.textContent.should.equal('No Request')
  input.value = 'abc'
  input.click()
  this.server.respond()
  div.textContent.should.equal('No Request')
  input.value = '1bc'
  input.click()
  this.server.respond()
  div.textContent.should.equal('No Request')
  input.value = '123'
  input.click()
  this.server.respond()
  div.textContent.should.equal('Clicked!')