aurelia-validation with custom element -
i created input form aurelia-validation plugin worked perfectly. created custom element replace input type textbox. i'm trying validate new custom element value, setting value attribute "validate" keyword - custom element input value isn't validated. seems validation controller not binded custom element. bindings array of validation controller doesn't contains custom element. maybe related actions should trigger validation (blur\focus out), added dispatching of blur event, still doesn't work. mentioned - worked when regular element. here relevant code (un-needed code removed): custom element template:
<template> <label> ${title}<input name.bind="fieldname" title.bind="title" focusout.trigger="focusoutaction()" /> </label> </template>
custom element relevant viewmodel code:
@bindable onfocusout; ... bind(bindingcontext) { var input = this.element.getelementsbytagname("input")[0]; input.type = this.customtype || "text"; input.placeholder = this.placeholder || ""; //input.value.bind = bindingcontext.registration.firstname & validate; } ... focusoutaction() { var customevent = new customevent("blur"); this.element.dispatchevent(customevent); this.onfocusout(); }
relevant container(parent) view code:
<form-input name="firstname" id="firstname" title="first name" bind- value="registration.firstname & validate" field-name="firstname" on- focusout.call="validateinput()" />
and relevant viewmodel code:
validationrules .ensure(r => r.firstname).displayname('first name').required().withmessage(`\${$displayname} cannot blank`) .satisfiesrule('firstnamevalidation') .ensure(r => r.lastname).displayname('last name').required().withmessage(`\${$displayname} cannot blank`) .satisfiesrule('lastnamevalidation') validateinput() { this.getvalidationerror(event.target.name); } getvalidationerror(propertyname) { let error = this.getvalidationfirsterror(propertyname); .... } getvalidationfirsterror(propertyname) { if (this.controllertovalidate.errors !== null && this.controllertovalidate.errors.length > 0) //this 0 !!!!! }
Comments
Post a Comment