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，它只会调用validate上的另一个paper-input函数。

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

我还建议您在reflectToAttribute元素内的required属性上设置my-p。但这只是因为我使用了选择器querySelectorAll("my-p[required]");

required: {
  type: Boolean,
  reflectToAttribute: true
}

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

1 个答案: