question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 8 years ago
  • Reactions:1
  • Comments:6

github_iconTop GitHub Comments

1reaction
bygirocommented, Aug 16, 2019

I’m having the same issue

0reactions
buttlecommented, Jun 28, 2021
  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)
Read more comments on GitHub >

github_iconTop Results From Across the Web

Change the position of parsley-errors-list in parsleyjs
In this solution we've added the element <div id="checkbox-errors"></div> before the end of the fieldset and changed the errorsContainer option ...
Read more >
Checkbox errors using parsley-multiple display wrong message in ...
When using multiple checkbox inputs, with different names but bound together using data-parsley-multiple , the desired behaviour is to have the error ......
Read more >
Examples | Simple form demo - Parsley.js
The aim here is to show a quick overview of parsley-API and Parsley customizable behavior.
Read more >
Validating User Input in ASP.NET Web Pages (Razor) Sites
Screenshot shows Validation errors that use CSS style classes. ... see how validation works, run this page and deliberately make mistakes.
Read more >
Compare multiple pairs of email addresses - Laserfiche Answers
By using a parsley validator, not only will it handle placement of the error message, but it will also behave like any of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found