无法在 rails 表单中创建 flatpickr 字段答案

【问题标题】：Unable to make flatpickr field required in rails form无法在 rails 表单中创建 flatpickr 字段
【发布时间】：2020-12-19 04:53:02
【问题描述】：

我有一个form_for 表格。我的一些字段用于选择日期，我使用flatpickr 进行。我无法在客户端使用表单验证来设置所需的字段。

我在application.js 中有以下基本的 flatpickr 代码：

flatpickr("[data-behavior='flatpickr']", {
  altInput: true,
  altFormat: "F j, Y",
  dateFormat: "Y-m-d"
});

在我看来，我尝试过制作这样的字段（有很多变体）：

<%= f.text_field :attribute_name,
  { label: "Description of attribute", data: { behavior: "flatpickr" }, required: true } %>

生成此 HTML：

<label class="required" for="model_name_attribute_name">Description of attribute</label>
<input data-behavior="flatpickr" required="required" class="form-control flatpickr-input" type="hidden" name="model_name[attribute_name]" id="model_name_attribute_name">
<input class="form-control form-control input" placeholder="" required="" tabindex="0" type="text" readonly="readonly">

一切正常，除了我不知道如何使该字段成为必填项。 Flatpickr 创建一个隐藏字段，其中包含在其 javascript 弹出窗口中选择的实际日期值，然后它使用您喜欢的任何格式在可见字段中显示它，即 readonly，因为它是由 flatpickr 设置的。似乎我尝试使字段“必需”使标签具有“必需”类并使隐藏字段“必需”，同时将可见字段留给required=''，这不足以在没有任何内容时停止提交被选中并且该字段为空。我有一个服务器端验证正在捕获它，但我想找到一种方法让客户端验证也能工作。

【问题讨论】：

当您说“客户端验证”时，您究竟是什么意思？如果它是空的，您可以编写一个小脚本来停止提交。你需要那个 required 属性吗？
“客户端验证”是指标准的 HTML 表单验证，在这种情况下具有 required 属性。如果该字段为空，我可以使用 javascript 来停止提交，但我想使用 required 属性来保持与表单中也使用 required 属性的其余字段的行为一致性。
这能回答你的问题吗？ Make flatpickr input required

标签： javascript html ruby-on-rails forms flatpickr

【解决方案1】：

显然，这是 flatpickr 中的一个已知错误，至少在撰写本文时尚未修复，但看起来已经有好几年了。作为一种解决方法，我最终通过在我的 flatpickr 配置中添加 allowInput: true 成功解决了这个问题，如下例所示：

flatpickr("[data-behavior='flatpickr']", {
  allowInput: true,
  altInput: true,
  altFormat: "F j, Y",
  dateFormat: "Y-m-d"
});

然后，当用户关注（通过单击或选项卡按钮）flatpickr 字段和inspired by this 时，我想自动选择字段中的所有文本，我使用 jQuery 确定了这个解决方案：

$("[data-behavior='flatpickr']").next().focus(function() {
  $(this).on("click.a keyup.a", function(e){      
    $(this).off("click.a keyup.a").select();
  });
});

使其工作所需的原始代码的主要区别在于.next()。正如我之前提到的，flatpickr 创建了一个隐藏字段来存储使用弹出选择器选择的日期，从技术上讲，它是具有id 和data-behavior 属性的隐藏字段。所以使用next()，我们正在监听可见字段，即下一个元素。

flatpickr GitHub issue page 讨论了许多替代方法，供那些想要不同方法的人使用，具体取决于您的需要。

【讨论】：