我已经为此苦苦挣扎了几个小时,但无法让它发挥作用。
我正在使用 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>'
});
});
如果您能给我指明正确的方向,我将不胜感激!
最佳答案
检查文档中的 errorsContainer
配置选项,它将允许您执行您想要的操作。
关于javascript - 在父 div 之前显示 Parsley.js 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43725347/