时间戳

首页 > 解决方案 > required 属性是否应该适用于表单内的模板自定义输入？

javascript - required 属性是否应该适用于表单内的模板自定义输入？

问题描述

我目前正在尝试构建一个自定义输入，它工作得很好，但由于某种原因，所需的属性（表单验证）不起作用。

  return ( // simplified code, <my-input>
      <div>
        <label htmlFor="myinput">myinput: </label>
        <input required name="myinput" id="myinput" type="text"/>
      </div>
    );

当我将自定义输入嵌套在表单标记中时，即使我设置了required属性，表单也不会阻止提交值。如果我只是将组件中的 html/jsx 代码复制/粘贴到表单标签中，则required会按预期工作。

<form>
  // required not working
  <my-input></my-input> 

  <div>
    <label for="myinput">myinput: </label>
    <input required name="myinput" id="myinput" type="text"/> // required working
  </div>

  <input type="submit">
</form>

问题：是否有特定原因导致所需属性在表单标签内的自定义输入（模板组件）中不起作用？或者也许它应该起作用，但我不知何故犯了一个错误。

标签： javascriptstenciljs

解决方案

它不起作用，因为 Web 组件的 Shadow DOM 破坏了输入与它所属的表单之间的链接。

然而，与表单相关的自定义元素的 API 正在制作中（参见规范），以允许 Web 组件的行为更像表单中的本机输入元素。

推荐阅读