Parsley JS 2.x - 你如何验证隐藏字段？答案

【问题标题】：Parsley JS 2.x - how do you validate hidden fields?Parsley JS 2.x - 你如何验证隐藏字段？
【发布时间】：2014-09-29 11:41:49
【问题描述】：

我想验证隐藏字段，所以基本上我想从 parsley 的排除表单元素列表中删除 input[type=hidden]。我已经尝试在欧芹的选项中明确设置排除元素，但隐藏字段仍未验证。例如：

$(element).parsley({
    excluded: 'input[type=button], input[type=submit]'
});

关于如何实现这一点的任何想法，或者我做错了什么？

【问题讨论】：

您可以使用隐藏字段发布您的表单吗？另外，你在那个 JS 中的 element 是什么？
$(element) 是 parsley 绑定的形式。是的，表格发布得很好，花花公子，否则按预期工作。它只是不会验证隐藏字段。
我应该注意，一种解决方法是使用隐藏在 CSS 中的常规文本输入（例如 display: none;）。然而，应该可以让欧芹从我读过的内容中验证隐藏字段，因此查询。也许是欧芹中的虫子？或者用户错误...

标签： javascript parsley.js

【解决方案1】：

我猜这是一个错误。

采取这种形式：

<form method="post" id="myForm">
    <input type="text" name="field1" value="" class="required" />
    <input type="hidden" name="hiddeninput" value="" class="required" />
    <input type="submit" value="Go">
</form>

使用以下 javascript，即使我们告诉 Parsley 验证隐藏字段，它也不起作用：

$("#myForm").parsley({
    excluded: 'input[type=button], input[type=submit], input[type=reset]',
    inputs: 'input, textarea, select, input[type=hidden], :hidden',
});

但是，如果您将其定义为 global configuration，它确实有效

window.ParsleyConfig = {
    excluded: 'input[type=button], input[type=submit], input[type=reset]',
    inputs: 'input, textarea, select, input[type=hidden], :hidden',
};

$("#myForm").parsley();

【讨论】：

也许@guillaumepotier 可以提供一些详细信息。
感谢调查 milz，非常感谢。至少可以定义为全局配置。
此问题已修复。此外，将:hidden 放在输入列表中是一个可怕的想法（缓慢且冗余）。见github.com/guillaumepotier/Parsley.js/issues/664
如果隐藏的元素变得可见，而不是验证的问题

【解决方案2】：

这绝对是 parsley 中的一个 bug，事实上已经有人提出了关于它的问题，请参阅：https://github.com/guillaumepotier/Parsley.js/issues/664，但不幸的是还没有做任何事情。基本上，在分析了 parsley 的源代码之后，问题是如果该字段已被全局排除，则 parsleyFormInstance 的选项将被忽略。有以下 if 语句决定这一点：

else if (this.$element.is(this.options.inputs) && !this.$element.is(this.options.excluded))

为了解决这个问题，我添加了以下代码行：

options = parsleyFormInstance == null ? options : parsleyFormInstance.options;

就在第 2160 行初始化 OptionsFactory 之前

this.OptionsFactory = new ParsleyOptionsFactory(ParsleyDefaults, ParsleyUtils.get(window, 'ParsleyConfig') || {}, options, this.getNamespace(options));

【讨论】：

【解决方案3】：

初始化欧芹时可以使用排除隐藏字段的方法。但是对于某些必须动态隐藏/取消隐藏表单部分的情况，它有一个缺点。另一种替代方法是覆盖“已验证”事件，并在内部检查该字段是否隐藏。

见下面代码sn-p：

$.listen('parsley:field:validated', function(fieldInstance){
if (fieldInstance.$element.is(":hidden")) {
    fieldInstance._ui.$errorsWrapper.css('display', 'none');
    fieldInstance.validationResult = true;
    return true;
}});

【讨论】：

【解决方案4】：

我所做的是：将输入字段设为只读并通过 css 隐藏。

【讨论】：

这不应该是一个答案，而是一个评论。
我已举报，但版主拒绝
这就是我最终不得不做的。谢谢！

【解决方案5】：

我遇到了同样的问题，但即使我设置了全局配置，它也无法正常工作。问题本质上是我正在重新定义选项。

全局配置：

window.ParsleyConfig = {
  excluded: 'input[type=button], input[type=submit], input[type=reset]',
  inputs: 'input, textarea, select, input[type=hidden], :hidden',
};

在我的代码中，我必须动态更改输入。然后，我将它们设置为默认值：

instance = $('form.parsley-validate').parsley(inputs: "input, textarea, select, input[type=hidden], :hidden")

我必须更改为

instance = $('form.parsley-validate').parsley(inputs: "input, textarea, select, input[type=hidden], :hidden", excluded: 'input[type=button], input[type=submit], input[type=reset]')

外卖：如果您更改配置，则必须覆盖所有设置。

【讨论】：