Shopify产品页必填日期选择器设置失效问题求助

针对你在Shopify产品模板中添加的课程日期输入框，虽已添加required属性和required类，但原生验证未生效的问题，可按以下步骤排查修复：

1. 排查自定义date-picker组件的干扰 #

date-picker作为自定义Web组件，可能拦截了原生表单验证事件。可先临时移除<date-picker>标签，直接保留<input>元素测试：

<label 
  for="course-date-{{ section.id }}"
  class="date_picker__label form__label"
>
  {{- 'products.product.course_date' | t -}}
</label>

<div class="date_picker__input-wrapper">
  <input
    type="date" 
    id="course-date-{{ section.id }}"
    class="required date_picker__input"
    name="properties[Kursdatum]"
    min="{{ block.settings.season_date_start }}"
    max="{{ block.settings.season_date_end }}"
    form="{{ product_form_id }}"
    required
  />
</div>

若原生验证生效，说明是自定义组件的问题，需修改date-picker逻辑，确保它将原生验证事件传递到内部的<input>元素。

2. 验证form属性的匹配性 #

确认{{ product_form_id }}输出的ID与产品表单的id完全一致。页面渲染后查看HTML源码，检查表单id是否和输入框的form属性值匹配——不匹配的话，输入框的required验证无法绑定到目标表单。

3. 修复日期范围的格式有效性 #

若min或max属性输出的日期格式非标准YYYY-MM-DD，会导致验证逻辑异常。可通过以下方式确保格式正确：

• 在Shopify后台检查season_date_start和season_date_end的设置值，确认是标准日期格式
• 或在Liquid中强制格式化日期：

  min="{{ block.settings.season_date_start | date: "%Y-%m-%d" }}"
  max="{{ block.settings.season_date_end | date: "%Y-%m-%d" }}"
  

4. 添加自定义表单验证逻辑 #

若原生HTML验证仍不生效，可通过JavaScript手动添加提交验证：

document.getElementById('{{ product_form_id }}').addEventListener('submit', function(e) {
  const dateInput = document.getElementById('course-date-{{ section.id }}');
  if (!dateInput.value) {
    e.preventDefault();
    alert('请选择课程参与日期');
    // 可添加自定义错误样式
    dateInput.classList.add('form__input--error');
  }
});

将这段代码添加到产品模板的{% schema %}标签之后，或主题的自定义JS文件中。

5. 检查主题全局表单验证配置 #

部分Shopify主题自带表单验证逻辑，可能忽略了产品属性的required设置。查看主题的product-form.js或类似文件，确认是否有覆盖原生验证的代码，调整逻辑使其包含自定义日期输入框。

内容的提问来源于stack exchange，提问作者moritzgvt