How can I disable a button in polymer until a field is valid?

Question

I like to create a basic dialog with polymer. The user shall enter a category name and if he entered something he can press on a button to save/send it. The button should be disabled as long as there is no value in the category field or as long as there is a validation error in the category field.

I tried this but it does not set the button to disabled initially.

<paper-input required auto-validate invalid="{{invalid}}"></paper-input>
<paper-button disabled$="[[invalid]]">Send</paper-button>

Polymer({
    is: 'list',
    properties: {  
        invalid: {
            type: Boolean
        },
        ...

If I use the function validate() on the input to compute the button value it will also trigger the invalid state (error msg) of the input although the user might not have entered something yet.

How can I get around this?

Reference: paper-input; paper-button

Maria's proposal with iron-form:

<form is="iron-form" method="get" action="/" id="eventsDemo">
  <paper-input name="name" label="Name" required auto-validate></paper-input>
  <paper-button raised disabled id="eventsDemoSubmit">
</form>

<script>
  eventsDemo.addEventListener('change', function(event) {
    // Validate the entire form to see if we should enable the `Submit` button.
    eventsDemoSubmit.disabled = !eventsDemo.validate();
  });
  document.getElementById('eventsDemo').addEventListener('iron-form-submit', function(event) {
    eventsDemoSubmit.disabled = false;
  });
  ...

Answer 1

You could use a computed binding that takes both invalid and the value as arguments.

<paper-button disabled$="[[isDisabled(invalid, value)]]">Enable on valid input</paper-button>

The isDisabled function would then check that the value has been set. For example like this:

isDisabled: function(invalid, value) {
    return invalid || value.length === 0;
}