CODEWITHSUNDEEP
polymer
Iskalla
Iskalla

Reputation: 381

Core-input validation on value commited

I'm making a form-like control with lots of inputs, and for that I'm using my own polymer element with a core-input in it. I'm having trouble validating it.

I don't want to set autovalidation for it since almost all of the inputs are required, and i don't like the idea of having a bunch of inputs lined in red and showing errors on page load. What I have (and thought would work) is the following code:

<polymer-element name="custom-core-input"
                 attributes="columnId inputError validation inputRequired">
<template>
    <section>
        <paper-input-decorator id="decorator" error="{{inputError}}">
            <input id="custominput"
                   is="core-input"
                   validate="{{validation}}"
                   on-change="{{inputCommited}}"
                   required?="{{inputRequired}}">
        </paper-input-decorator>
    </section>
</template>
<script>
    Polymer({
        inputRequired: false,
        inputCommited: function () {
            this.$.decorator.isInvalid = !this.$.custominput.validity.valid;
        }
    });
</script>
</polymer-element>

I threw some alerts on the inputCommited function before, and it looks like the input value is always valid, doesn't matter if it's blank or filled with anything that shouldn't match validate.

As a note, the validation string I'm using is "^(\d*|\d+,\d{1,2})$", I'm asuming this works on Polymer. In any case when required is true it doesn't take blank as an invalid input.

Upvotes: 0

Views: 332

Answers (1)

oliverdm
oliverdm

Reputation: 381

If the validation property is a regular expression use <input pattern="{{ validation }}"...> and it should work (see input validation at MDN):

<input id="custominput"
       is="core-input"
       pattern="{{ validation }}"
       on-change="{{ inputCommitted }}"
       required?="{{ inputRequired }}">

The change event for a text input is only triggered if the value is changed and the input loses focus. There needs to be another mechanism that triggers validation at an appropriate time to make sure every input is validated once, for example, when the form is submitted.

Upvotes: 1

Related Questions