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

Question

Question

Require one or more selection in a group

asked on June 28, 2018 Show version history

I have a group of checkboxes that shows up at a certain stage of a form and I would like to make it required that at least one of the boxes be checked before submitting.  When you do this via the layout and just make the checkbox object 'Required' it works just fine, but if I try making the input of the class assigned to that object required then the user has to check every box before they can proceed.

I've tried inspecting the source of a test page where I had used the layout to make the checkbox object required and comparing it to the source of my custom page; it adds a class called "group-required", but when I add that class it doesn't seem to have any effect.

Here's what I've got so far:

function checkcurrentstep() {
    if ($('.currentstep input').val() == "Campus Supervisor Approval"){
    $('.supervisor').show();
    $('.supervisorreq input').attr('required', "True");
    $('.supervisorreq label.cf-label').append('<span class="cf-required">*</span>');
    }  
}

 

 

1 0

Replies

replied on June 28, 2018

Is it one filed with 3 check boxes? Or is it 3 fields with 1 checkbox each?

Try making the field required without selecting the input:

  $('.supervisorreq').attr('required', "True");

I am not sure if .supervisorreq is one of your checkbox fields, but assume it is.

0 0
replied on June 28, 2018

I had tried that, when I do that nothing is required.

 

It's one field with multiple checkboxes and I need to make sure that one or more are checked.

0 0
replied on June 28, 2018 Show version history

if ($("#containerID input:checkbox:checked").length > 0) {
   // your code goes here to make field required
}

Will that work?

0 0
replied on June 28, 2018

It looks like that is to use a checkbox to make another field required.  I want the checkbox field itself to be required, but only for one or more boxes.

0 0
replied on June 28, 2018 Show version history

Here's an example of what happens when I use

$('.supervisorreq input').attr('required', true);

Even when I check all of the boxes and fill out the other field it still has the "Value is required." error.  Not only that but apparently the radio field that also has the supervisorreq class is acting the same way; even though I've selected an option it still acts like a requirement hasn't been met.

1.png
1.png (21.64 KB)
0 0
replied on June 28, 2018

You could have it re-evaluate the field when a change is made. Try adding this line in and see if it still shows the validation message:

$('.supervisorreq input').on('change', function(){
   //this checks validation again
   $('.supervisorreq input').parsley().validate().
});

 

0 0
replied on June 28, 2018

I assume that was supposed to be validate(); but still no dice

0 0
replied on June 28, 2018

It throws out the error when I try to submit, so I also tried this (to no avail):

$('.Submit').on('click', function(){
$('.supervisorreq').parsley().validate();
      });

 

0 0
replied on June 28, 2018

One other thing: an easier way to add a class to an element:

$('.something').addClass('yourClass');

And, parsley().validate() go together. 

I have to run, hopefully someone else can chime in an clarify. Good luck!

0 0
replied on June 28, 2018

The following code hides the submit button unless at least one checkbox is selected, and has a permanent "This field is required" message displayed under the field. It assumes that the custom CSS class assigned to the field is 'checkbox'.

You may want to tweak it to display dynamic warning messages, etc.

$(document).ready(function () {
  $('.Submit').hide();
  $('<p>This field is required.</p>').insertAfter('.checkbox');
  $('.checkbox input').change(function() {
    if ($('.checkbox input:checkbox:checked').length > 0) {
      $('.Submit').show();
    }
    else
      $('.Submit').hide();
  });
});
    

 

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

Sign in to reply to this post.