I'm using PaperInput and like the feel. But, is there a way to do the validation using my own logic? For instance, in some cases a pattern match is not enough to determine the error I'd like to display. An example would be I want the PaperInput to specify an item which can only be added once, so the validation would do a lookup in some model map and if input.inputValue is not present it is valid, otherwise invalid.
<paper-input floatingLabel
id="alias-input"
validate="{{aliasIsValid}}"
type="text"
error="{{aliasError}}"
label="Person Alias (eg: King, Eldest Son, Mooch, etc.)"
required
></paper-input>
So, I would like to be able to implement bool aliasIsValid() and set @observable String aliasError when validation is invalid. I do not think this is how it works, but is there a way to achieve this?
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