Question

根据Victor的ideas，我正在努力让Parsley和Bootstrap一起玩。但是Parsley在输入下面显示了它的错误消息，而不是在工具提示中，因为Victor的代码试图实现。所以我修改了“classHandler”-fn并添加了console.output以查看它是否完全执行 - 而且我没有得到任何输出。

HTML ：

<form id="regform" class="form-horizontal" method="post">
<div class="form-group"><label class="control-label col-lg-3" for="name_k">Schüler <i class="fa fa-user fa-fw"></i></label>
<div class="col-lg-9"><input id="name_k" name="name_k" placeholder="Vor- und Nachname des Kindes (z.B: &quot;Karl Musterkind&quot;)" type="text" class="form-control col-lg-9" data-parsley-required="true" data-error-message="Bitte geben Sie Vor- und Nachname des Kindes an!" >
</div>
</div>
    <input type="Submit" class="btn btn-primary" value="Absenden">
    </form>

JS：

$(document).ready(function() {
    var parsleyOptions = {
  // Sets success and error class to Bootstrap class names
  successClass: 'has-success',
  errorClass: 'has-error',

  // Bootstrap needs success/error class to be set on parent element
  errors: {
    classHandler: function(el) {
        console.log("Error-handler!");
        // return el.$element.closest(".form-group");
      return el.parent();
    },
    // Set these to empty to make sure the default Parsley elements are not rendered
    errorsWrapper: '',
    errorElem: ''
  },
  listeners: {
    // Show a tooltip when a validation error occurs
    onFieldError: function (elem, constraints, parsleyField) {
      elem.tooltip({
        animation: false,
        container: 'body',
        placement: 'top',
        title: elem.data('error-message')
      });
    },
    // Hide validation tooltip if field is validated
    onFieldSuccess: function(elem, constraints, parsleyField) {
      elem.tooltip('destroy');
    }
  }
};
          $('#regform').parsley(parsleyOptions);
});

我还整理了一个fiddle，但不幸的是，发布时有一个CSRF问题，所以我不确定这是否有任何帮助。

由于维克多的文章已经是2岁了，也许它指的是欧芹1.x？不幸的是，我没有“充分”获得该文档来验证这个想法，仍然有类提手被提及等等，而且我没有足够的Parsley经验来“看到”......

Answer 1

在另一个enter link description here中，我找到了这段代码（我为Parsley 2.1修改过）：

$.listen('field:error', function (fieldInstance) {

    arrErrorMsg = ParsleyUI.getErrorsMessages(fieldInstance);
    errorMsg = arrErrorMsg.join(';');

    fieldInstance.$element
        .popover('destroy')
        .popover({
            container: 'body',
            placement: 'right',
            content: errorMsg
        })
        .popover('show');

});

$.listen('field:success', function (fieldInstance) {
    fieldInstance.$element.popover('destroy');
});

但这给了我一个关于pubsub-stuff被弃用的警告 - 我将为那个打开一个新的q。

欧芹：classHandler没有执行？

1 个答案: