L'attribut requis doit être affiché visuellement

Question

J'ai un formulaire où certains champs sont obligatoires et d'autres non. maintenant:

• Est-ce polymère fournissent une façon de marquer un élément « hors-the-box » comme « nécessaire »?
• Sinon, quelle est la meilleure façon, en CSS, de montrer qu'un champ est requis?

À l'heure actuelle, une fois le formulaire soumis, les champs obligatoires seront affichés comme tels. Toutefois, cela se produit après le formulaire est soumis (ou tenté). Je voudrais que l'utilisateur sache que même si le prénom est requis, le deuxième prénom ne l'est pas.

Est-ce que je manque quelque chose de très évident?

Answer 1

Une façon serait d'utiliser l'attribut prefix ou suffix

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

Une autre façon serait de créer un 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]]"> 

Mais cela ne fait pas de sens que pour required domaine que vous aurez pour émuler/copier le code complet paper-input

Answer 2

Voici e basique xemple comment je valider les entrées: Plunk

Sur chaque changement d'entrée appeler la méthode de validation,

si elle passe - soumettre le formulaire.

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