Taking total control of PaperInput validation Taking total control of PaperInput validation dart dart

Taking total control of PaperInput validation


Polymer.dart <= 0.16.x

import 'dart:html';import 'package:polymer/polymer.dart';import 'package:core_elements/core_input.dart';@CustomTag('app-element')class AppElement extends PolymerElement {  AppElement.created() : super.created() {}  void inputHandler(Event e) {    var inp = ($['custom'] as CoreInput);    // very simple check - you can check what you want of courxe    if(inp.inputValue.length < 5) {      // any text is treated as validation error      inp.jsElement.callMethod('setCustomValidity', ["Give me more!"]);    } else {      // empty message text is interpreted as valid input      inp.jsElement.callMethod('setCustomValidity', [""]);    }  }}

To validate only when the input element loses focus remove validateImmediately from the HTML element and use the on-change event instead (not tested).

<paper-input id="custom" on-input="{{inputHandler}}" validateImmediately></paper-input>

I added a comment at https://github.com/dart-lang/core-elements/pull/102 to make this method available directly in Dart with the next update.

The documentation of <core-input> states that the HTML5 constraint validation API is supported. For more information see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation