Блог

У меня есть форма, в которой некоторые поля являются обязательными, а некоторые другие — нет. Теперь:

• Предоставляет ли Polymer какой-либо «готовый» способ пометить элемент как «обязательный»?
• Если нет, то каков наилучший способ в 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 код

Вот простой пример того, как я проверяю входные данные: 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");
          }
},