I hope I'm wrong here :D
check out this gist to see what I mean
Hi, aurelia-validation, is it possible to know if the form was touched by the user? My goal is to prevent the user to submit the form until is it filled and valid. I currently check that there are no errors thanks to
validation-errors.bind="errors" but when the page loads, this array is empty. This means the user can submit it right away.
@Jenselme Otherwise, you can forgo doing any validation until the user presses the submit button.
When you create the form, you know at that point it has not been touched
I assume your trigger is on blur or change, so once they have "touched" something then validation fires. (you can also, of course, handle those events yourself if you want). Thing is, what you want to know is whether the entire form is valid, and you can only know that if you validate the entire form.
so it partly depends on exactly what you want to feed back to the user
one thing you can do is have two controllers, or mess around with swapping renderers on a single controller, and have two validation paths, one that validates per field and displays feedback per field, and one that validates the entire object, without visual feedback, to set the disabled state on your button.
I should just reuse
validation-errors.bind="errors": the array is filled correctly initially
You can make controller.errors observable, a bit of a hack IMHO, or, the currently proposed best method is to implement your own ValidationRenderer whose render method is invoked whenever validation occurs.
There is a long unresolved discussion of this, here: aurelia/validation#318
Feel free to add your support to implementing something there....
Yes, you could observe your
errors property
on second thought, I'm not sure how observing the
errors properties (yours or the controller's) helps you know when validation has occurred, nor in knowing whether the entire form is valid.
may it ^^^ could help in just knowing whether validation has changed
@dkent600 I didn't manage to use two controllers but I found a work around with one controller and a validator. More details in this blog post: http://www.jujens.eu/posts/en/2017/Jan/24/aurelia-validation/
I doubt my solution scales thought. But for my test app with aurelia-validation it is enough. I hope we will have a better way to do this soon.
I use a Validator in attached. This won't display any message unlike the validate method of ValidationController. Since I need to rely on that to enable/disable my button, I have to watch if the title is changed to do a manual validation. I guess I should add these precision to my post.
I tried changing the code to this:
this.validator.validateTrigger = validateTrigger.changeOrBlur;
/*ol.getObserver(this.todo, 'title').subscribe(() => {
this.validate();
});*/But this has no effect: this.validator.validateObject is never called. Maybe I am missing something to correctly use trigger with Validator?
@Jenselme Try passing in your validator to
controllerFactory.createForCurrentScope()
@Jenselme oh, I get why
@Jenselme Seems like you could create your own implementation of
Validator, containing the instance of StandardValidator that you got from DI....
@dkent600 this could be the way! I am trying to implement it:
class MyValidator {
constructor(validator, cb) {
this.validator = validator;
this.cb = cb;
}
validateProperty(object, propertyName, rules) {
this.validator.validateProperty(object, propertyName, rules);
}
validateObject(object, rules) {
return this.validator.validateObject(object, rules).then(results => {
this.cb(results);
return results;
});
}
ruleExists(rules, rule) {
return this.validator(rules, rule);
}
}sadly I get a strange error:
Uncaught (in promise) TypeError: Cannot read property 'slice' of undefined
at ValidationController.processResultDelta (validation-controller.js:243)
at eval (validation-controller.js:190)Don't see why.
@dkent600 It's getting late. I have to go. I'll try again tomorow and keep you posted on what I find.
constructor(authService: AuthService, controller: ValidationController) {
// Aurelia-Authentication
this.authService = authService;
this.authService.authenticated = false;
// Aurelia-Validation
this.controller = controller;
this.controller.validateTrigger = validateTrigger.change;
....