在父div之前显示Parsley.js错误

时间:2017-05-01 19:37:51

标签: javascript twitter-bootstrap parsley.js

我已经和它搏斗了几个小时但却无法让它发挥作用。

我正在使用bootstrap,我正试图让Parsley.js按照我的方式使用它。

默认情况下,错误消息显示在错误的输入元素下方,但我希望它们显示在父元素上方。

我的HTML就在这里......

    <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>

我希望错误消息显示在<div class="input-group">上方。这可能吗?

我已经尝试过这个javascript,但错误仍然出现在输入元素之后......

$(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>'
    });
});

如果你能指出我正确的方向,我真的很感激!

2 个答案:

答案 0 :(得分:1)

检查文档中的import org.apache.logging.log4j.LogManager; import org.apache.logging.log4j.Logger; import org.apache.logging.log4j.ThreadContext; public class MultiThreadLog4j2SepFilesMain { //Create a lock to use for synchronizing the getting of the logger private static final Object lock = new Object(); public static void main(String[] args) { Thread t1 = new Thread(new Runnable(){ public void run() { //Set up the context before getting logger ThreadContext.put("threadName", Thread.currentThread().getName()); //Get the logger for this thread Logger log = null; synchronized(lock){ log = LogManager.getLogger(Thread.currentThread().getName()); } //Generate some logs log.info("here's the first thread"); //Wait a while so that threads interleave try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } //Generate more logs log.debug("some debug in first thread"); log.info("finishing first thread"); }}, "Thread.1"); //Use a name that will allow us to use Thread.getName when getting the logger inside the thread Thread t2 = new Thread(new Runnable(){ public void run() { //Set up the context before getting logger ThreadContext.put("threadName", Thread.currentThread().getName()); //Get logger for this thread Logger log = null; synchronized(lock){ log = LogManager.getLogger(Thread.currentThread().getName()); } //Generate some logs log.info("here's the second thread"); log.debug("some debug in second thread"); }}, "Thread.2"); //Use a name that will allow us to use Thread.getName when getting the logger inside the thread //Start both threads t1.start(); t2.start(); } } 配置选项,它可以让您按照自己的意愿行事。

答案 1 :(得分:0)

@Marc - 谢谢,这让我走上正轨。 如果其他人需要知道如何做到这一点,这里有几个很好的答案......

Change the position of parsley-errors-list in parsleyjs

Parsley.js - change error container