Question

使用Parsley.js，是否可以指定应该包含错误消息的元素？我试过了：

$('#myForm').parsley({
    errors: {
        container: {
            $('#errorMessages')
        }
    }
});

但错误消息仍然在我的表单输入后放置。

Answer 1

我添加了另一个数据属性data-parsley-errors-container =“＃element”，它可以让你直接在dom中指定错误消息的显示位置。

此处有更多信息：http://parsleyjs.org/doc/index.html#ui-for-field

最佳

Answer 2

我从容器键提供的功能中返回 true 。

我的HTML元素

<input type="text" class="input-small" errorSpan="yyy"  id="ddd" name="ddd" value="" data-required="true">
<span id="yyy"></span>

<强>的Javascript

$('#abc').parsley({
            errors: {
                classHandler: function ( elem ) {}
              , container: function ( elem, template, isRadioOrCheckbox ) {
                   //here i have span msg. id to be displayed as custom attribute in input element
                    $('#' + $(elem).attr('errorSpan')).html(template);
                    return true;//returning back boolean makes it work
                  }
              , errorsWrapper: '<ul></ul>'
              , errorElem: '<li></li>'
              }
        });

如果我返回

，它也会有效

return $('#' + $(elem).attr('errorSpan')).html(template);

希望这会有所帮助......

Answer 3

您需要使用回调函数来执行此操作

这是一个将错误消息附加到元素父级的简单示例。

$('#myForm').parsley({
    errors: {
        container: function ( elem ) {
            return $( elem ).parent();
        }
    }
});

编辑：在1.1.10-dev上工作，我改变了如上所述定义错误容器的方法。小心，这是BC Break;

Answer 4

data-parsley-errors-container="#your-div-id"为我工作

<div class="form-group">
  <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Start Time</label>
  <div class="col-md-6 col-sm-6 col-xs-12">
       <div class=" datetimepicker3 input-append timepick">
          <input class="form-control" data-format="hh:mm" placeholder="HH:MM" type="text" name="startTime" data-parsley-errors-container="#startTimeErrorContainer" required="required"  id="startTime" />
          <span class="add-on"><i class="fa fa-clock-o icon-time"></i></span>  
       </div>   
      <div id="startTimeErrorContainer"></div>                                            
  </div>

Answer 5

@guillaumepotier我在jquerymobile上尝试了你的代码，我没有在屏幕上显示任何错误信息。我想在课堂“help-inline”中添加错误消息

<强>的index.html

<script src="js/vendor/parsley.message.th.js"></script>
<script src="js/vendor/parsley.extend.min.js"></script>
<script src="js/vendor/parsley.min.js"></script>

...

<div class="control-group">
    <label class="control-label" for="A0_C1">From<i class="required-icon"></i></label>
    <div class="controls">
        <input type="text" id="A0_C1" name="A0_C1" value="" required="required" />
        <span class="help-inline"></span>
    </div>
</div>

<强> parsley.message.th.js

window.ParsleyConfig = $.extend( true, {}, window.ParsleyConfig, { 
    errors: {
        container: function ( elem ) {
            return $(elem).parent().find(".help-inline");
        }
    }
});

更新 - v1.1.9-dev上的工作解决方案

return $(elem).closest('.controls').find('.help-inline').append(template);

Answer 6

在Parsley库导入之前定义classHandler函数，在我的情况下，我使用bootstrap并在父div上应用错误和有效类（它有＆＃ 34; form-group＆＃34; class）。

new DeploymentOptions().setWorker(true)

现在只需将data-parsley validate添加到您的表单标记：

<script>
    window.ParsleyConfig = {
      classHandler: function ( parsleyField) {
      // specify where parsley error-success classes will be set
      return parsleyField.$element.parent();
      // Change this to change the element to apply too
      },
    };
</script>

使用bootstrap时，您还需要指定引导程序错误和有效的类

<form  method="post" id="form1" data-parsley-validate>

为了得到＆＃34; has-error＆＃34;在无效/错误状态的父div上设置的类（对于有效状态也是如此）：

<form method="post" id="form1" data-parsley-error-class="has-error" data-parsley-success-class="has-success" data-parsley-validate>

此解决方案适用于所有领域。

Parsley.js - 显示指定元素中的错误

6 个答案: