CODEWITHSUNDEEP
parsley.js
Merwer
Merwer

Reputation: 546

Single parsley.js error message for multiple fields

I'm looking for a way to use a single parsley validation error message for a set of input fields. The primary example of this would be for an address input field, but I'm sure others can come up with similar examples where this might be useful.

<div id="error-container"></div>
<input name='address1' data-parsley-maxlength="255" data-parsley-errors-container="#error-container">
<input name='address2' data-parsley-maxlength="255" data-parsley-errors-container="#error-container">
<input name='address3' data-parsley-maxlength="255" data-parsley-errors-container="#error-container">

Using the above code right now would result in 3 different error messages, but I want to set up a scenario where only one message would be displayed if any of the inputs are invalid.

Thanks in advance

Update

After a bit of JS console fun, I think I've found something that works. The idea below is to prevent any UI changes being done by parsley on the group, and to trigger a check on the whole group each time one of the elements are validated. This may not be the best way to do things, but it appears to be working with my single test-case. I'm thinking that this could be re-worked into a validator so that I can re-use it for other sets of inputs in the future.

<div id="error-container"></div>
<input name='address1' data-parsley-ui-enabled='false' data-parsley-trigger='change' data-parsley-group='address-grp' data-parsley-maxlength="255" data-parsley-errors-container="#error-container">
<input name='address2' data-parsley-ui-enabled='false' data-parsley-trigger='change' data-parsley-group='address-grp' data-parsley-maxlength="255" data-parsley-errors-container="#error-container">
<input name='address3' data-parsley-ui-enabled='false' data-parsley-trigger='change' data-parsley-group='address-grp' data-parsley-maxlength="255" data-parsley-errors-container="#error-container">

var $addressFields = $("[data-parsley-group='address-grp']");
addressFields.each(function(index, element) {
  $(element).parsley().on('field:validated', function(parsleyField) {
    var fieldOptions = parsleyField.actualizeOptions().options;
    var classHandler = fieldOptions.classHandler(parsleyField);
    var container = $(fieldOptions.errorsContainer);
    classHandler.removeClass(fieldOptions.successClass);
    classHandler.removeClass(fieldOptions.errorClass);
    var valid = parsleyField.parent.isValid(fieldOptions.group);
    if(valid) {
      console.log("Valid");
      classHandler.addClass(fieldOptions.successClass);
      container.html("");
    } else {
      console.log("Invalid");
      classHandler.addClass(fieldOptions.errorClass);
      container.html("Error");
    }
  });
});

Upvotes: 3

Views: 2645

Answers (2)

Zags
Zags

Reputation: 41338

You can do this fairly cleverly with a bit of CSS if you add a particular class to your error container.

HTML:

<div id="error-container" class="parsely-single-error"></div>

CSS:

.parsely-single-error .filled ~ .filled {
    display: none;
}

Explanation

The CSS reads, "hides any child elements of the error-container that have the class 'filled' and come after another element that has the class 'filled'". This has the effect of hiding all but the first 'filled' error in the error container.

For reference, the parsely error container looks like this when filled:

<div class="parsely-single-error" id="error_container">
    <span class="help-block filled" id="parsley-id-5">
        <div class="parsley-required">This value is required.</div>
    </span>
    <span class="help-block" id="parsley-id-7"></span>
    <span class="help-block filled" id="parsley-id-9">
        <div class="parsley-required">This value is required.</div>
    </span>
    <span class="help-block filled" id="parsley-id-11">
        <div class="parsley-required">This value is required.</div>
    </span>
    <span class="help-block" id="parsley-id-13"></span>
</div>

Upvotes: 6

Marc-Andr&#233; Lafortune
Marc-Andr&#233; Lafortune

Reputation: 79612

I'm not sure there a great way to do this.

You could try configuring it so that errors are put in the same container, and then use CSS to only show the :first of them?

Upvotes: 0

Related Questions