Forums

Hi there,

I searched the forum and find this post http://www.chronoengine.com/forums.html?cont=posts&f=26&t=66192 with a short JS from Greyhead (thanks for this) to limit the number of possible checkboxes which can checked when sending the form.

I`ve used the code via the 'Load JS' Utility on my form http://www.logoloop.eu/... but it don't work. I see no JS error on the console?! The chronoform built-in validation works fine.

Maybe someone could give me a hint, what else could went wrong.

Thank you in advance.

regards,
Marc

Hi Marc,

I think that the problem here is that the script snippets are running in the 'wrong' order so that the validation class is being added *after* the FormCheck validation has been set up and so it is not seen and has no effect. I think that I have found a better way of doing this since I wrote that script; I'll see if I can find it and post it here.

Bob

Hi Bob,

thank you for the qiuck response! 😀

I´ve already arranged the 'Load JS' Box to the top of the event - before 'Show html', but in this case I only get a blank page after submittung the form.

So, if you have an alternative for that, I'll be very happy.

regards,
Marc

Hi Marc,

I added a couple of lines to this to - hopefully - handle timing variations. If the formCheck is already defined then it will remove and reset the validation for this input.

window.addEvent('domready', function() {
  var checkbox;
  checkbox = $('input_checkbox_group_1_0');
  checkbox.addClass("validate['%countCheck']");
  if ( typeof formCheck_test_checkbox_validation !== 'undefined' ) {
    formCheck_test_checkbox_validation.dispose(checkbox);
    formCheck_test_checkbox_validation.register(checkbox);
  }
});
var countCheckMax = 3;
var countCheckMin = 1;
function countCheck(el) {
  var group = el.getSiblings(['input']);
  group.include(el);
  var count = 0;
  group.each(function(item) {
    if ( item.checked ) {
      count++;
    }
  });
  if ( count > countCheckMax ) {
    el.errors.push("You can only check "+countCheckMax+" items");
    return false;
  } else if ( count < countCheckMin ) {
    el.errors.push("Please check at least "+countCheckMin+" items");
    return false;
  } else {
    return true;
  }
}

Note: in this line you should enter the id of one of the checkboxes in the group you want to validate.

checkbox = $('input_checkbox_group_1_0');

in your form that would become e.g.

checkbox = $('input_checkbox_group_111_0');

Bob

Hi Bob,

again thank you for sending me this code. But I´m sorry to say, that nothing changed.

I've put the code into the load js box under the show html event, but the first validation that work is the salutation?!

Do you have any other ideas?

regards,
Marc

Hi Marc,

The Load JS action should probably before the Show HTML action, please switch that over and see if it then works.

Bob

Hi Bob,

when I put the load js box before the show html box, non of the validations (custom or built-in) work. After submitting a empty form a blank page is shown?!

regards,
Marc

Hi Marc,

I've found the problem with the validation after a lot of digging around. Your checkboxes are each wrapped in a separate <div> and so the getSibling(['input']) line in my script doesn't find any siblings to check. You'll can try removing the <div>s or editing the script so that it finds all of the checkboxes in the group.

The blank page on submit is an indicator of a PHP error somewhere in the form :-(

Please see this FAQ for a test to try.

Bob

Dear Bob,

sorry for the late answer and thank you for the info. I eliminate the divs around the input field, but it is the same as before. 😢

To ensure that this had nothing to do with the older Joomla System I tried this also on a J2.5 with Chronoforms 4.0 (Stable).

Regards,
Marc

Hi Marc,

There are still <div> tags around the inputs:

<div>
  <input type="checkbox" class="validate['%countCheck']" value="Gratis-Muster: 86 x 54 mm Kreditkartengröße mit abgerundeten Ecken" title="Bitte wählen!" id="input_checkbox_group_111_0" name="input_checkbox_group_111[]">
  <label for="input_checkbox_group_111_0">86 x 54 mm Kreditkartengröße mit abgerundeten Ecken</label>
</div>

Bob

Hi Bob,

yes, your're right. They appeared after I used the wizard to edit the form. But I already tried the script without the surrounded divs (as you can see now on the demo).

regards,
Marc

Hi marc,

You need to edit the code to match your form name so these lines:

    if (typeof formCheck_test_checkbox_validation !== 'undefined') {
        formCheck_test_checkbox_validation.dispose(checkbox);
        formCheck_test_checkbox_validation.register(checkbox);
    }

would be

    if (typeof formCheck_muster_salesforce_logoloop !== 'undefined') {
        formCheck_muster_salesforce_logoloop.dispose(checkbox);
        formCheck_muster_salesforce_logoloop.register(checkbox);
    }

Sorry I wasn't clearer about that :-(

Bob

Hi Bob,

again many thank for that advice. As you can imagine I`m not used to work in Javascript or other programming tasks. 😟

But I`m sorry to say, that the problem still exists. I have updated these lines but the result is still the same ... 🤨 🤔

regards,
Marc

Hi Marc,

Now please try replacing this line:

var group = el.getSiblings(['input']);

with

var group = el.getSiblings('input');

Bob

Hi Bob,

I followed your advice and replace the line. But the validation won't work ... 😫

Thanks again!

Regards,
Marc

Hi Marc,

I just checked the form and the validation is working. The error message is Bitte Wählen!; the error show up as the last validation because it was added last and I'm not sure that the count is quite correct but it does work.

Bob

Hi Bob,

yes you are right! 😀

I'm sorry, but I expected that the validation at the top of the page, because the corresponding fields are at top.

Is it possible to change the order of the validation to the top?

Again a big thank to you...

Regards,
Marc

PS. I think it is time to get something to drink for you! :wink:

Hi Marc,

I've never used it but the formCheck documents say that you can use a second parameter to set the validation order. e.g. formcheck.register(newField, 3); I guess that would be formCheck_form_name.register(checkbox, 1); (or possibly 0) for your code.

See here.

Bob

Hi Bob,

I've used formCheck_form_name.register(checkbox, 1); and it works! 😀

Regards,
Marc