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

1
votes

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;
  });
  ...
3
javascriptvalidationpolymerpolymer-1.0web-component

3 Answers

4
votes

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;
}
1
votes

Here is one possible solution: Plunk

<paper-input  
                label="Insert number from the range [1, 10]"
                id="step"
                type="number" 
                min="1" 
                max="10"
                value="{{value}}"
                editable

                required

                auto-validate="true"
                invalid="{{invalid}}"
                preventInvalidInput
                error-message="value: {{value}}  - means invalid is {{invalid}}"

                on-change="stepChange">

</paper-input>


        <br>
        value: {{value}}
        <br>
        invalid: {{invalid}}
        <br><br><br>
        <paper-button raised disabled$="{{invalid}}">Enable on valid input</paper-button>
1
votes

I'm not sure If I fully get your requirements. For sure you can try computed bindings and computed properties. You have a nice cheat-sheet here https://meowni.ca/posts/polymer-cheatsheet/