Polymer: verhindern Einreichung Form, wenn die Eingabe ungültig

Question

Ich habe eine Komponente, die eine paper-input einkapseln, wie Sie im folgenden Code sehen:

<dom-module id="my-p"> 
    <template> 
    <div class="my-class> 
     <paper-input 
      type="number" 
      value="{{value}}" 
      name="{{name}}" 
      error-message="Error" 
      invalid="{{invalid}}" 
      label="{{name}}" 
      allowed-pattern="[0-9,]" 
      required="{{required}}"></paper-input> 
    </div> 
    </template> 

    <script> 
    Polymer({ 
     is: 'my-p', 
     properties: { 
      name: String, 
      value : { 
       type: Number, 
       notify : true 
      }, 
      required : Boolean, 
      invalid: { 
       type: Boolean, 
       value: false, 
       notify: true 
      }, 
     } 
    }); 
    </script> 
</dom-module> 

Außerdem habe ich eine andere Komponente eine vorherige Komponente in eine Form hinzuzufügen:

<dom-module id="my-form"> 
    <template> 
    <h2>My test</h2> 
    <form is="iron-form" id="form" method="get"> 
     <my-p name="my input 1" value="{{value1}}" invalid="{{!_m(value1, value2)}}" required="true"></my-p> 
     <my-p name="my input 2" value="{{value2}}" invalid="{{!_m(value1, value2)}}"></my-p> 

     <paper-input name="paper" type="number" label="paper" required="true"></paper-input> 

     <button type="submit">Send</button> 
     <paper-button raised id="btn" on-click="_send">Send</paper-button> 
    </form> 
    </template> 

    <script> 
    Polymer({ 
     is: 'my-form', 
     _m(v1, v2) { 
      var n1 = parseInt(v1); 
      var n2 = parseInt(v2); 
      var valid = n1 >= (n2 + 2); 
      return valid; 
     },_send() { 
      console.log("ok2"); 
     } 
    }); 
    </script> 
</dom-module> 

required Attribut funktioniert, wenn ich auf erste Schaltfläche einreichen: Formular nicht, wenn erforderlichen Eingaben sind leer vorgelegt.

Das Problem ist, wenn eine Eingabe invalid ist: Formular wird gesendet.

Kann ich die Übermittlung des Formulars verhindern, wenn invalid eingegeben wird?

Answer 1

Tun Sie es nicht mit button, rufen Sie stattdessen Ihre eigene Funktion, wo Sie manuell überprüfen, ob Formular gültig ist und dann manuell Formular absenden.

hat validate Funktion, aber ich glaube nicht, dass ti hier arbeiten wird, da Sie eingekapselten Papier-Eingang verwenden. Zum Glück hat paper-input Funktion submit Funktion, so dass Sie diese Funktion auf jedem einzelnen my-p Element aufrufen.

Beispiel:

<form is="iron-form" id="form" method="get"> 
     <my-p name="my input 1" value="{{value1}}" required></my-p> 

     <paper-input name="paper" type="number" label="paper" required="true"></paper-input> 

     <paper-button raised on-tap="checkAndSendForm">Send</paper-button> 
    </form> 

Dann innen JS definieren Funktion checkAndSendForm:

checkAndSendForm() { 
    var validated = true; 
    var inputs = this.querySelectorAll("my-p[required]"); // select all required inputs 
    for(var i = 0; i < inputs.length; i++){ // iterate through all required inputs 
    if(!inputs[i].validate()) { 
     validated = false; // input validation failed and will stop submit 
    } 
    } 

    if(validated) { 
    this.$.form.submit(); // manually submit the form 
    } 
} 

Innen my-p Element Sie validate Funktion definieren, die nur nennen eine andere validate Funktion auf paper-input.

validate() { 
    this.querySelector("paper-input").validate(); // validate paper-input 
} 

und ich würde vorschlagen, dass Sie auch reflectToAttribute auf required Eigenschaft innerhalb my-p Element einzustellen. Aber das ist nur, weil ich Selektor

required: { 
    type: Boolean, 
    reflectToAttribute: true 
}