聚合物：防止在提交表单时输入无效

Question

我有封装的paper-input，你可以在下面的代码中看到一个组件：

<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> 

此外，我还有一个组件来添加一些以前的成分为一种形式：当我点击第一个提交按钮

<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属性适用：如果需要输入是空的形式不提交。

问题是，当任何输入invalid：提交表单。

我可以防止自己提交表单，如果有任何invalid输入？

Answer 1

不要button做到这一点，而不是调用自己的功能，可以手动检查是否是形式合法，然后手动提交表单。

iron-form具有validate功能，但我不认为，因为你使用的封装纸输入TI将在这里工作。幸运的是，paper-input具有submit功能，所以你拨打的每一个my-p元素此功能。

例如：

<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> 

然后，里面JS，定义功能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 
    } 
} 

里面my-p元素，你必须定义功能validate将只需拨打paper-input另一个validate功能。

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

，我也建议你设置reflectToAttribute上required属性里面my-p元素。但是，这仅仅是因为我曾经选择querySelectorAll("my-p[required]");

required: { 
    type: Boolean, 
    reflectToAttribute: true 
}