CODEWITHSUNDEEP
javascriptjqueryvalidationparsley.js
Nicole Harris
Nicole Harris

Reputation: 860

Insert additional content into parsley error

I would like my parsley JS validation errors to render like this:

<span id="parsley-id-8333" class="form-error filled">
    <span class="parsley-required">
        <i class="fa fa-exclamation-triangle"></i>
        Error Message Goes Here
    </span>
</span>

How can I modify this function to append the <i> inside my errorTemplate?

window.ParsleyConfig = {
  errorsWrapper: '<span class="form-error"></span>',
  errorTemplate: '<span></span>'
};

Upvotes: 2

Views: 475

Answers (1)

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

Reputation: 79612

The question is: what happens for multiple error messages for the same field?

If having one triangle is fine for you, then it's easily achieved by adding your icon to the wrapper:

errorsWrapper: '<span class="form-error"><i class="fa fa-exclamation-triangle"></i></span>',
errorTemplate: '<span></span>'

You'll get something compatible with what you were looking for:

<span id="parsley-id-8333" class="form-error filled">
    <i class="fa fa-exclamation-triangle"></i>
    <span class="parsley-required">
        Error Message Goes Here
    </span>
</span>

Of course, you don't want it to appear unless there's actually an error, so you'll need some CSS rule(s) to hide it otherwise, like:

.form-error:not(.filled) i { display: none; }

If you really need it in the errorTemplate, then I'm afraid there's no easy way, but it wouldn't be too hard to add it yourself with javascript. You can listen to the parsley:form:error event, search for error spans and prepend your <i>...

Upvotes: 3

Related Questions