CODEWITHSUNDEEP
javascripttwitter-bootstrapparsley.js
Damian
Damian

Reputation: 1720

Show Parsley.js errors before parent div

I've been wrestling with this for a couple of hours but can't get it to work.

I'm using bootstrap and am trying to get Parsley.js to work with it how I'd like.

By default, error messages are displayed below the input element that is in error but I'd like them to display above the parent element.

My HTML is here...

    <div class="row">
      <div class="col-xs-6"><label>Reference number</label></div>
      <div class="col-xs-6">
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
          <input class="form-control" id="user_reference" name="user_reference" placeholder="Reference" data-parsley-group="stage_1" required />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6"><label>Your surname</label></div>
      <div class="col-xs-6">
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
          <input class="form-control" id="user_surname" name="user_surname" placeholder="Surname" data-parsley-group="stage_1" required />
        </div>
      </div>
    </div>

I'd like the error messages to appear above the <div class="input-group">. Is that possible?

I've experimented with this javascript, but the error still appeared after the input element...

$(document).ready(function() {
    $('#register_form').parsley({
        trigger: 'change',
        successClass: 'has-success',
        errorClass: 'has-error',
        classHandler: function (el) {
            return el.$element.closest('.input-group');
        },
        errorsWrapper: '<div class="invalid-message"></div>',
        errorTemplate: '<span></span>'
    });
});

If you can point me in the right direction, I'd be really grateful!

Upvotes: 1

Views: 597

Answers (2)

Damian
Damian

Reputation: 1720

@Marc - thanks, that put me on the right track. If anyone else needs to know how to do this, here are a couple of good SO answers...

Change the position of parsley-errors-list in parsleyjs

Parsley.js - change error container

Upvotes: 1

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

Reputation: 79562

Check the doc for the errorsContainer configuration option, it will allow you to do what you want.

Upvotes: 1

Related Questions