javascript - 可视化显示所需的属性

Question

我有一个表单，其中一些字段是必需的，而另一些字段则不需要。现在:

• Polymer 是否提供任何“开箱即用”的方式将元素标记为“必需”？
• 如果不是，在 CSS 中显示该字段为必填字段的最佳方式是什么？

目前，一旦提交表单，必填字段就会显示出来。然而，这种情况发生在提交(或尝试)表单之后。我希望用户知道，虽然名字是必需的，但中间名不是。

我是否遗漏了一些非常明显的东西？

Answer 1

一种方法是使用属性前缀或后缀

<paper-input label="First Name">
  <div prefix>*</div>
  <div suffix>*</div>
</paper-input>

另一种方法是创建一个新的输入元素

<span hidden={{!required}} class="required"> * </span>
<paper-input-container no-label-float="[[noLabelFloat]]" 
                       always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" 
                       auto-validate$="[[autoValidate]]" 
                       disabled$="[[disabled]]" 
                       invalid="[[invalid]]">

但这仅对于必填字段没有意义，因为您必须模拟/复制完整的paper-input代码