Immediate form validation with dependant input elements

[tpeter1985]

Hey it's me again.

I use your library and I think it's very cool.
I currently have a problem which I can't handle.

I have a list for entering absences.
When all data for one entry is given I can check if the user entered too many entries for the given Date.

My problem is that I can only validate this immediately and show a message by adding the same validation-check to every input element.
But the result is showing the same message below every input element.

I created a simplified example on Plunker: http://plnkr.co/edit/FG9uyr1l3cEY7QSehQkr?p=preview

1. Go to first line, for day enter "1" and select "1 Day Holiday".
2. Go to second line, for day enter "1" and select "1 Day Holiday".

By clicking submit I see the message under every input element.

Do you have any idea how to handle this?

In my mind it could be handled by executing the validation of an element via the service.
You would only have to put the validation to the day input element and when absence type changes you can refresh the day validation via a service call.
I created a simple Plunker example to show how my idea looks like:
http://plnkr.co/edit/o1fftbnmRfjScEDmi7ZH?p=preview

FYI: In my real application the table has more columns and I use remote validation too.

[ghiscoding]

Hello, it might be because it's Monday morning but I don't totally understand your problem...

It might help to pass not only the absence to your custom validation but also pass the type of input you're dealing with (day or type). Something like this custom:checkTooManyEntriesForOneDay(absence, 'day') and then use that type within your custom validation function.

In your second section of the question, you talk about the Service, I assume that you mean Angular-Validation Service but you are not using it. Angular-Validation Service works exactly the same as the Directive except for the fact that you need to know the input name so that you can create a validation.

At the end, I don't see any problem with my Angular-Validation package. It's up to you to define the proper logic within your project.

[tpeter1985]

Hi,

thank you for your fast reply.

If I didn't explain the problem well then let us look only at the first example.

How can I warn the user immediately about making too many entries for a fay without warning him multiple times in one tablerow?

When I add validation to the day and the type input element, the same validation message is shown multiple times.

Do you see this behaviour in the first example?

[ghiscoding]

If you can't have the same date twice, then why not use your custom validation only on the date field? I don't see the need to use it on the absenceType as well.

You could also think outside of the box and add that extra multiple dates check directly on the submit button (with ngClick). If you go that way, you can make the field as invalid by yourself through $scope.myForm.myInput.$setValidity("validation", false);

There's probably multiple ways to deal with your problem but again I don't see any problem with the Angular-Validation package.

[tpeter1985]

I still talk about example 1 only:

How many entries are valid for one day depends on the absence type too (function checkTooManyEntriesForOneDay).

It's valid to have the same date twice if you do the following steps:

1. Go to first line, for day enter "1" and select "Visit to the doctor"
2. Go to second line, for day enter "1" and select "1/2 Day Sick Day"

The desired solution, because of a nice user experience, is to tell the user that input is invalid at the moment he fills the input field.

If it would be possible with your package to revalidate an input element via javascript a possible solution could look like this:

• Add the "Too many days" validation to the day field
• Revalidate the day field in the change event of the absence type dropdown

So the validation could always be done at the moment the input changes with no dependeny which input element is filled first.
The message would appear once under the day field.

The problem I try to resolve I think can be said in general words is the follwing limitation:
When a validation rule depends on more than one input element it's currently not possible to show a validation message only once and to show it at the moment the user fills the input field.

With the possibility to revalidate a field via JS, the developer can add the validation rule to the field he wants to show the message at and use the change event of the other dependant fields to revalidate the field with the validation rule assigned.

[ghiscoding]

If you want to help, this is what the community is about, and make a pull request for this new feature (possibly a new function revalidate(inputName) in the Service). I would be happy to accept your pull request... else you will have to wait. I spent enough of my free time on this package already.

[tpeter1985]

Okay, I worked the whole day for a solution, I think tomorrow I have a solution for working with directives.

[tpeter1985]

Just added my first pull request 😄
It contains the possibility for revalidation when working with directives.
I don't work with the service and it took me so long for creating the functionality to work on directives.

A working example can be found on the second link.

Perhaps with my code it's not so much work for you to enable and test the same functionality for the service?

I hope my pull request gets into your branch.

Thank you for this package and the nice support 🎁

[ghiscoding]

Merged your code and updated to revision 1.4.21. Thanks for the PR