CODEWITHSUNDEEP
javascriptparsley.js
Joel
Joel

Reputation: 2215

Parsley.js - Understanding and erroring on groups

I think I've misunderstood the use of groups in Parsley.js. What I had assumed is that groups could be used to not show an error on an individual input but on a group.

For instance, I have three sort code fields for a bank details form.. they're all required, but I don't want each one individually to get an error message (as they're inline), if any of them error, I want the group to get the error message and error class.

Is this possible without writing custom javascript to parse the form data manually?

Upvotes: 1

Views: 2282

Answers (1)

Luís Cruz
Luís Cruz

Reputation: 14970

You can't do that with data-parsley-group. Groups were created in order to validate a multi-step form. That is norrmally a large form that you split into steps (groups) and validate them one at a time.

What you can use, without adding custom javascript, is data-parsley-errors-container.

You should apply this attribute on every field where you want to group the error messages. You should use something like this:

data-parsley-errors-container="#element"

Where element is the id of the element where the messages will be displayed.

Here is an example on how you should create your form (jsfiddle available):

<form class="form-inline" role="form" id="myForm">
    <div class="form-group col-xs-12">
        <input type="text" class="form-control col-xs-3" id="field1" required
            placeholder="Field 1" data-parsley-errors-container="#listFieldError" />
        <input type="text" class="form-control col-xs-3" id="field2" required
            placeholder="Field 2" data-parsley-errors-container="#listFieldError" />
        <input type="text" class="form-control col-xs-3" id="field3" required
            placeholder="Field 3" data-parsley-errors-container="#listFieldError" />
    </div>
    <div class="form-group">
        <div id="listFieldError"></div>
        <button type="submit" class="btn btn-default">Sign in</button>
    </div>
</form>

Upvotes: 1

Related Questions