Question

Noob聚合物在这里，所以请耐心等待。

我试图学习如何创建一个表单，要求用户在点击＆＃34;提交＆＃34;之前将文本输入到文本框中。用户应该点击＆＃34;提交＆＃34;如果文本框中没有任何内容，则文本框将突出显示为红色，并显示错误消息等。

到目前为止我的代码（尚未验证）：

<dom-module id="accountability-ticket">
    <template>
        <paper-dialog with-backdrop entry-animation="scale-up-animation" exit-animation="fade-out-animation" id="diagTicket">
            <h2>I Own It Ticket</h2>
            <div>
                <paper-input-container id="gcashDeco" required error="GCash Ref. Required">
                    <input id="gcashText" is="iron-input">
                </paper-input-container>
                <div class="ctrlButtons flex">  
                    <paper-button dialog-dismiss>Cancel</paper-button>
                    <paper-button on-click="confirmClick">Submit</paper-button>
                </div>
            </div>
        </paper-dialog>
    </template>
</dom-module>
<script>
Polymer({
    is: "accountability-ticket",
    confirmClick: function(event){
        console.log(event);
        var gCashDeco = document.getElementById('gcashDeco');
        var gCashText = document.getElementById('gcashText');   
    }
});

</script>

我一直在阅读Polymer文档，到目前为止提出了两件事：

<paper-input>本身并不根据v0.5进行验证 - 它必须首先包含在<paper-input-decorator>中。
版本1.0更不清晰，<paper-input-container>代替<paper-input-decorator>，并且在演示页面中使用了混合标记。

鉴于我想坚持使用最新版本（v1.0），我需要在代码中添加什么来检查文本框是否为空，如果是，则显示错误消息？

感谢。

Answer 1

是的，Polymer文档有些令人困惑，但作为一般的经验法则：总是看一下元素的行为。

因此，paper-input（在1.0中）附带PaperInputBehavior，这意味着您可以简单地编写以下内容：

<paper-input label="Input label" required error-message="Field required!"></paper-input>

<paper-input label="Input label" minlength="4" maxlength="10" auto-validate></paper-input>

<paper-input label="Input label" pattern="MY_REGEX" auto-validate></paper-input>

<paper-input label="Input label" validator="myvalidator"></paper-input>

auto-validate输入 - 当然 - 在输入时进行验证。 myvalidator必须是实现IronValidatorBehavior并在页面上某处插入的元素。如果您不希望字段自动验证或想自己进行，请在该字段上调用validate()或设置invalid - 标志，并显示错误消息。您甚至可以通过编程方式调整消息。

Answer 2

虽然validator似乎很有用，但我发现它很简单，可以直接测试输入。这将满足您的需求：

...
<div>
    <paper-input-container id="gcashDeco">
    <paper-input-error>Field is empty</paper-input-error>
    <input id="gcashText" is="iron-input" value="{{gcashInput::input}}">
    </paper-input-container>

    <div class="ctrlButtons flex">  
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button on-tap="confirmClick">Submit</paper-button>
    </div>
</div>
...

...
Polymer({
is: "accountability-ticket",

confirmClick: function() {
    if (this.gcashInput == null)
    {
        //show error
        this.$.gcashDeco.invalid = true;
    }
}

此paper-input-error元素由其所在的paper-input-container的id引用。将其invalid属性设置为true会显示错误，false会将其隐藏。

<paper-input-error>Field is empty</paper-input-error>

下一个代码段会将字段的输入值绑定到变量this.gcashInput，您可以在confirmClick内或任何其他方法中访问该变量。

{{gcashInput::input}}

最后要注意的是，在Polymer元素中获取id元素的方法如下：

this.$.gcashDeco

不是你想用vanilla Javascript的方式：

document.getElementById('gcashDeco');

后者，vanilla JS方式，将搜索主DOM，而不是元素所在的Shadow DOM。因此，如果您需要搜索DOM，请使用document.getElementById()，如果您需要在元素中搜索ID，请使用this.$.elemendId。

单击按钮时聚合物v1.0输入验证

2 个答案: