需要直观显示的属性

Question

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

• 聚合物是否提供任何“开箱即用”的方式来标记元素为“必需”？
• 如果不是，在CSS中显示需要字段的最佳方法是什么？

目前，一旦表单提交，所需的字段将显示为这样。但是，在提交(或尝试)表单后就会发生这种情况。我想让用户知道，虽然名字是必需的，但中间的名字不是。

我错过了什么很明显的东西吗？

Answer 1

一种方法是使用属性prefix或suffix

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

另一种方法是创建一个new input element

<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]]">

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

Answer 2

下面是我如何验证输入的基本示例：扑通

在每次输入更改上调用验证方法，

如果它通过-提交表单。

<paper-input  
                id="step"
                type="number" 
                min="1" 
                max="10"
                value="{{value}}"
                editable

                required

                auto-validate="true"
                invalid="{{invalid}}"
                preventInvalidInput
                error-message="value: {{value}}  - means invalid is {{invalid}}"

                on-change="stepChange">

</paper-input>



stepChange: function(e, detail) {

        //validation code
        //Fields must be revalidated on each change
        var step = this.$.step;
        var val_step = step.validate();

        // if alll the inputs are valid then submit the form
        if ( false == val_step )
          {
              console.log("not invalid");
          }
        else
          {
              console.log("invalid");
          }
},