mardi 7 mai 2019

how to tweak form validator.js to only send form if checkbox is checked

I have made a contact form using the example at https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form which works fine. Now I would like to add a checkbox which the user has to check (besides a google recaptcha and the mandatory form fields) if he wants to be able to submit the form.

i think i have to tweak the validator.js file but since i don't know javascript, i have no idea how to edit the existing validator file.

HTML of additional checkbox:

<label>
<input type="chbox" name="chbox" id="chbox"><a href="terms.html">Terms and conditions</a>.
</label>

js:

function getValue($el) {
  return $el.is('[type="checkbox"]') ? $el.prop('checked')                                     :
         $el.is('[type="radio"]')    ? !!$('[name="' + $el.attr('name') + '"]:checked').length :
                                       $el.val()
}

var Validator = function (element, options) {
  this.options    = options
  this.validators = $.extend({}, Validator.VALIDATORS, options.custom)
  this.$element   = $(element)
  this.$btn       = $('button[type="submit"], input[type="submit"]')
                      .filter('[form="' + this.$element.attr('id') + '"]')
                      .add(this.$element.find('input[type="submit"], button[type="submit"]'))

  this.update()

  this.$element.on('input.bs.validator change.bs.validator focusout.bs.validator', $.proxy(this.onInput, this))
  this.$element.on('submit.bs.validator', $.proxy(this.onSubmit, this))
  this.$element.on('reset.bs.validator', $.proxy(this.reset, this))

  this.$element.find('[data-match]').each(function () {
    var $this  = $(this)
    var target = $this.data('match')

    $(target).on('input.bs.validator', function (e) {
      getValue($this) && $this.trigger('input.bs.validator')
    })
  })

  this.$inputs.filter(function () { return getValue($(this)) }).trigger('focusout')

  this.$element.attr('novalidate', true) // disable automatic native validation
  this.toggleSubmit()
}

only if the mandatory fields are filled out and the checkbox and the recaptcha checks are made, the submit button should become clickable and the form can be submitted.




Aucun commentaire:

Enregistrer un commentaire