updated to newest version of polymer and input validation is no longer working

问题

        <paper-input
          id="server"
          floatinglabel=""
          label="Server Address"
          value=""
          required
          type="URL">
        </paper-input>

the example above worked until the latest polymer update now even the required attribute does nothing. was there some change to core-input that i am missing in documentation? all my inputs with patterns, numbers, urls, or emails nothing causes it to get the invalid class.

回答1:

        <paper-input-decorator
          id="address"
          labelVisible
          floatinglabel
          error="URL Required"
          label="Server Address">
          <input is="core-input" type="URL" id="server" required>
        </paper-input-decorator>

above is the updated markup for checking input of url. before the changes the input had invalid by default cause the field was required and updated as you type.

with the new changes you have to call a function to get the input to return the invalid class. (you could put a event listener on the input and run that function every time the input is updated. but i only check on attempted submission) to check i put all the inputs i want to check in a container (a div with a id) then when user click to submit i run the function below.

validate: function (id) {
  'use strict';
  var $d = document.getElementById(id).querySelectorAll('paper-input-decorator');
  Array.prototype.forEach.call($d, function(d) {
    d.isInvalid = !d.querySelector('input').validity.valid;
  });
}

and pass in the id of the input container. validate(id);

that will cause the input to display the invalid class if input doesn't meet type / pattern requirement. you can then check for invalid class in the same method as before.

invalid = document.querySelector("#address").classList.contains("invalid");

outside a custom element or

invalid = this.$.address.classList.contains("invalid");

inside custom element

then some logic to check for invalid class before running the save function

if (!invalid) {
  save();
}

also keep in mind that the decorator and input both have a id. the id on the decorator is used to check for validity while the id on the input is there for getting the value from the committedValue attribute.

info above is for the master branch pulled after 10 - 16 - 14

来源：https://stackoverflow.com/questions/26447343/updated-to-newest-version-of-polymer-and-input-validation-is-no-longer-working

标签

polymer