必需的属性以可视化方式显示

Required attribute to be shown visually

本文关键字：可视化 方式 显示 属性      更新时间：2023-09-26

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

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

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

我是否错过了一些非常明显的东西?

一种方法是使用属性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代码

下面是我验证输入的基本示例:

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

如果通过-提交表单。

<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");
          }
},
相关文章：