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 illustration above worked until latest polymer update required attribute nothing. there alter core-input missing in documentation? inputs patterns, numbers, urls, or emails nil causes invalid class.
<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 updated markup checking input of url. before changes input had invalid default cause field required , updated type.
with new changes have phone call function input homecoming invalid class. (you set event listener on input , run function every time input updated. check on attempted submission) check set inputs want check in container (a div id) when user click submit run 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 id of input container. validate(id);
that cause input display invalid class if input doesn't meet type / pattern requirement. can check invalid class in same method before.
invalid = document.queryselector("#address").classlist.contains("invalid");
outside custom element or
invalid = this.$.address.classlist.contains("invalid");
inside custom element
then logic check invalid class before running save function
if (!invalid) { save(); }
also maintain in mind decorator , input both have id. id on decorator used check validity while id on input there getting value committedvalue attribute.
info above master branch pulled after 10 - 16 - 14
polymer
No comments:
Post a Comment