Checkbox errors using parsley-multiple display wrong message in wrong place

[Pinpickle]

When using multiple checkbox inputs, with different names but bound together using data-parsley-multiple, the desired behaviour is to have the error message appear at the end. But the error message displays after the first input, and does not take the message from data-parsley-error-message.

This form should produce an error "Please choose at least 1" underneath the second checkbox:

<form data-parsley-validate >
  <div>
    <label for="form-check1">
      <input type="checkbox" name="check1" id="form-check1" data-parsley-multiple="checkbox" /> 
      Check 1
    </label>
  </div>
  <div>
    <label for="form-check2">
      <input type="checkbox" name="check2" id="form-check2" data-parsley-multiple="checkbox" data-parsley-mincheck="1" data-parsley-required data-parsley-error-message="Please choose at least 1" /> 
      Check 2
     </label>
  </div>
  <input type="submit" />
</form><form data-parsley-validate >
  <div>
    <label for="form-check1">
      <input type="checkbox" name="check1" id="form-check1" data-parsley-multiple="checkbox" /> 
      Check 1
    </label>
  </div>
  <div>
    <label for="form-check2">
      <input type="checkbox" name="check2" id="form-check2" data-parsley-multiple="checkbox" data-parsley-mincheck="1" data-parsley-required data-parsley-error-message="Please choose at least 1" /> 
      Check 2
     </label>
  </div>
  <input type="submit" />
</form>

It doesn't, it displays "This value is required" underneath the first checkbox if none are checked.

See this CodePen for an example.

[varghesethomase]

I am facing the same issue too. I had three check boxes, and i attached the data-parsley-mincheck ='1' to the last checkbox. But the error showed for the second checkbox.

[joeynimu]

Maybe you should try using the Errors container something like data-parsley-errors-container: "#your-error-container-id"

You will need to create a div with an ID or class that you will then use to reference it as depicted above. More documentation here

[StonehengeCreations]

For anyone looking for a solution to this (old) thread...

<?php
$option_name = 'your-option-name';
$saved = get_option($option_name);
$choices = array('0' => 'First', '1' => 'Second', '2' => 'Third', '3' => 'Fourth', '4' => 'Fifth', '5' => 'Sixth');
?>
<form method="post" action="" data-parsley-validate="">
<p><strong>Please check a box:</strong></p>
<p><div>
    <?php foreach($choices as $key => $label) {
        $checked = ( in_array($key, $saved['checkboxes']) ? 'checked="checked"' : null );
        echo sprintf('<input type="checkbox" id="%s" name="%s" value="%s" %s %s> <label for="%s">%s</label><br>',
            $key, $option_name.'[checkboxes][]', $key, $checked, 'data-parsley-group="status" required', $key, $label);
        } ?>
    </div>
</p>
<p><?php submit_button(); ?></p>
</form>

The "trick" is to wrap the checkbox group in a div (no need to id it) and leave the "label for" separate from the actual checkbox.

This will check the complete group for at least one checked box. If not, the complete div will be styled red (with class="parsley-error"). The error "This field is required" will be shown under the div.

[bygiro]

I'm having the same issue

[jonmnoj]

I resolved this issue by using the data-parsley-class-handler attribute to set which element should be used for adding the parsley-error class onto when validating.

You can find the information for this in the UI for field parsley doc section.

[buttle]

  var parsley_options = {
    // append the error message to the form group
    errorsContainer: function (field) {
        var input = field.element;
        var type = $(input).prop('type');
        var form_group = $(input).closest(".form-group");
        if (form_group.length != 0 && (type == "radio" || type == "checkbox")) {
          return form_group
        }
      }
  }
  $('#form').parsley(parsley_options)