Question

我有一个表格，其中需要一些字段，而其他一些字段不是。现在：

聚合物能提供任何开箱即用的＃34;将元素标记为＆＃34;必需＆＃34;？
如果没有，那么在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

以下是我如何验证输入的基本示例：Plunk

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

如果通过 - 提交表格。

<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");
          }
},

要以可视方式显示所需的属性

2 个答案: