by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    James DeMeuse
    @jdemeuse1204
    I may just have to play with it for a little bit
    Doug Kent
    @dkent600
    did you try the two-way binding?
    James DeMeuse
    @jdemeuse1204
    Yup
    @dkent600 Ok, now I really have it. Let me send you what I did
    James DeMeuse
    @jdemeuse1204
    Custom Element:
    <template bindable="placeHolder, model, describedBy, modelName">
        <div class="input-group input-group-flat">
            <input type="text" class="form-control" placeholder="${placeHolder}" value.one-way="model[modelName] & validate" aria-describedby="${describedBy}">
            <span class="input-group-addon" id="${describedBy}"><i class="fa fa-asterisk"></i></span>
        </div>
    </template>
    Usage:
    <input-validation place-holder="Account Number" model-name="AccountNumber" model.bind="model.creditItem" described-by="manage-credit-items-account-number"></input-validation>
    I had to pass in the property name I am trying to validate on the element. I called it modelName
    Doug Kent
    @dkent600
    ok, i don't have enough knowledge to know why that kind of property dereferencing worked. tant mieux, as they say in french
    James DeMeuse
    @jdemeuse1204
    :)
    Martin Johansson
    @kvadd
    I might have found an issue with Aurelia Validation, but more likely I'm not using correct. When I loop out a few input fields with repeat.for, the validation does not recognize the fields and give it a true on validation. However, when I put the fields in manually the validation works as intended. What am I doing wrong here?
    Doug Kent
    @dkent600
    @kvadd what do you mean "does not recognize the fields"?
    Martin Johansson
    @kvadd
    you have value.bind="firstName & validate" on the input field, so the validation recognize that it should validate that field
    @dkent600 And, when you do a repeat.for, I believe it does it on the last time on the render, and since the validation-activation is done in the constructor it does not really understand that it should validate it
    Anyways, I have opened an issue on github
    aurelia/validation#408
    Doug Kent
    @dkent600
    @kvadd I believe this functionality does work (I have used it myself many times). I'll take a look at the issue to get more details.
    Martin Johansson
    @kvadd
    that would be awesome
    I hope I'm wrong here :D
    check out this gist to see what I mean
    Doug Kent
    @dkent600

    @kvadd If you change this line in the gist:

    <form submit.delegate="submit()">

    to this:

    <form submit.delegate="submit()" with.bind="$parent">

    then the validation works.

    I'm not sure if this should be necessary or not.

    I added this comment to the github issue.

    Julien Enselme
    @Jenselme
    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.
    Doug Kent
    @dkent600
    @Jenselme Can you just assume that the form is not valid, at the start? You know the form has not been touched until they touch it...
    Julien Enselme
    @Jenselme
    @dkent600 how do I detect that?
    Doug Kent
    @dkent600
    When you enter into the view, on activate or bind
    @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
    Julien Enselme
    @Jenselme
    @dkent600 I'd prefer to disable the button until the form is correct. I still fail to see how I can detect a user interacted with it: I agree that on 1st display, the user has not touched it. How do I know they did?
    Doug Kent
    @dkent600
    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.
    Julien Enselme
    @Jenselme
    The two controllers may solve my problem. I am doing some tests with manual validation in attached: I can get a canSave property to false initially. My problem is: how can I detect that validation has run again to update this value and allow the user to submit the form?
    I should just reuse validation-errors.bind="errors": the array is filled correctly initially
    Doug Kent
    @dkent600

    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
    Julien Enselme
    @Jenselme

    You can make controller.errors observable

    I tried that without success.

    I am trying to obtain the behaviour I want with two controllers. I'll also look at the link you posted.

    Doug Kent
    @dkent600
    cool
    Doug Kent
    @dkent600
    @kvadd Sorry, make that: <div class="form-group" repeat.for="field of fields" with.bind="$parent">
    Julien Enselme
    @Jenselme
    @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/
    Doug Kent
    @dkent600
    @Jenselme How do you manage to prevent the error message for the title from displaying too soon?
    Julien Enselme
    @Jenselme
    @dkent600 I do. The message is displayed by the controller (normal usage) and the button is managed by the validator.
    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.
    Doug Kent
    @dkent600
    @Jenselme Since you are validating in attached, it seems like the message would show then. Also, I"m curious why you need the ol.getObserver thing. Doesn't the validator get automatically used on change or blur?
    Julien Enselme
    @Jenselme
    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.
    Doug Kent
    @dkent600
    @Jenselme OK, I think then your validateTrigger should be "manual". But the thing is, you are displaying titleErrors -- why isn't that showing an error message after you validate in attached?
    Julien Enselme
    @Jenselme

    Because titleErrors are managed by the ValidationController not the Validator. From the doc

    When you use a Validator directly to validate a particular object or property, there are no UI side-effects- the validation results are not sent to the the validation renderers.

    Doug Kent
    @dkent600
    @Jenselme Ah! I get it. OK, can you leave the trigger at "changeOrBlur" and remove the ol.getObserver? Then your validator would be invoked on change or blur. and you have a more scalable solution. what do you think?
    Julien Enselme
    @Jenselme

    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?