You are viewing limited content. For full access, please sign in.

Question

Question

Require Two Checkboxes for 'Two Forms of ID'

asked on May 8, 2017

I am working on a form that requires two forms of ID, like job application requirements. The user can choose Other, which then brings up a list of check boxes that the submitter must choose two of them to proceed. I have been unsuccessful in finding a solution for this, what is the best way (if possible) to do this?

2017-05-08 12_36_04-Preview.jpg
1 0

Answer

SELECTED ANSWER
replied on May 17, 2017 • Show version history

Mitch,

Try using this code, but be sure to swap out the placeholder locators for your form.  

You will need to create a single line field, make it required, and then hide it with CSS.  Using CSS will still enforce the field requirement and prevent the Submit button from actually submitting the form.

$(document).ready(function() {
  var checkboxRequired = function() {
    var counter = 0;
    var inputs = $('#Field19 input'); //Checkbox Inputs - use Field - not #q19
    
    $.each(inputs, function() {
      if ($(this).is(":checked"))
        counter += 1;
    });
           
    //"counter >= 2" can be set to the number of checked checkboxes you require
    if (counter >= 2) {
      $('#Field11').val(1); //hidden, required, single line field
    } else {
      $('#Field11').val('');
    }
  };
  
  $('#q19').on('click', checkboxRequired);  //checkbox field - using q will just broaden the area on the page where the function is triggered
  
  $('.Submit').on('click', function () {
    var checkboxController = $('#Field11').val();
    if (checkboxController == "") {
      alert("You must choose two options in the checkbox field"); //you can customize the prompt here
      $('html, body').animate({
        scrollTop: $('#q19').offset().top
      }, 1000); //1000 is milliseconds for the animation - increase for a slower scroll, decrease for faster scroll
    }
  });
});

 

2 0
replied on May 17, 2017

Worked exactly how I needed it, thank you!

0 0

Replies

replied on May 8, 2017

Hi Mitch,

 

   Have you considered making two separate radio-button fields, both required, which contain the same information? Label the first one something like "First type of current photo ID" and the second one likewise.

 

Thanks,

Michael

0 0
replied on May 12, 2017

I had explored that, as well as drop-down menus. The issue I found there was that  a user could select the same thing twice. I believe there is a way to require that two check boxes be checked with JavaScript, but have been unable to find any code. I'm not well-versed enough yet to write my own :(

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.