Tuesday 15 February 2011

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



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