Support validation group

[lvarayut]

I added a validation-group attribute that could be used to group many elements into a group. The group will be considered as valid if and only if one of them is valid. Otherwise, the group will be marked as invalid. A valid/invalid message will be placed inside an element that contains an id attribute with the same name as provided to the directive validation-group.

<label>Validation group</label>
<!-- Group both of these elements inside the contact group -->
<input type="text" name="email" ng-model="email" validator="required" validation-group="contact"> 
 <input type="number" name="telephone" ng-model="telephone" validator="number" validation-group="contact">
 <!-- The message will be placed in side the span element -->
 <span id="contact"></span>

Closed #40

[hueitan]

@lvarayut Do you want to create a new validationGroupSpec.js for this test?

Since we have too many test cases in this file.

[lvarayut]

That's what I was thinking at the first time. However, I decided to put it in the same file because the validation-group is in the directive file. I'm afraid that we would get confused afterward. What do you think?

[hueitan]

Me too, I'm thinking about the same thing before. As you can see the current folder of the test, I have combined all the directive spec in different files.

I agree with you that we may get confused afterward, but without making it clear, the test file will harder to modify and fix.

I suggest we create a new test file if given a new test case, for the previous old one we can keep them originally until we enhance them and move them to the new file.

What do you see?

[lvarayut]

You're right. Let's do it!

[hueitan]

Is this possible to validate group?

for example we validate the Form using

$validationProvider.validate(Form);

validate single input

$validationProvider.validate(Form.required);

I wish we can have the opportunity to validate group

$validationProvider.validate(checkboxGroup);

[hueitan]

For every validation-group, there is only one output message, am I right?

[hueitan]

What about define

var validationGroup = attrs.validationGroup

so that we use validationGroup instead of repeatly calling attrs.validationGroup within the function.

[lvarayut]

That's a great advice! Same for attrs.messageId. I'll fix both of them.

[hueitan]

Thank you. Same for other attributes :)

[lvarayut]

$validationProvider.validate(Form);
$validationProvider.validate(Form.required);

I haven't tested it but it should work in both of them because, in the code, I just verified that in case of any elements of the group error, it will show an error message. Otherwise, it'll be valid. All the "validation" process still remains the same as before. I'll write some more unit tests!

I wish we can have the opportunity to validate group
$validationProvider.validate(checkboxGroup);

I'll take a look at this case.

[hueitan]

Ok, I will test that too :)

[hueitan]

Thanks @lvarayut

[hueitan]

@lvarayut I have gone through your code

so this attribute validation-group should only use in the same Form? Is it not able to group in different Form?

different Form:

<form name="Form1"></form>

<form name="Form2"></form>

We should clarify this condition in the API document, because the term "group" is easily misunderstood.

[lvarayut]

We should clarify this condition in the API document, because the term "group" is easily misunderstood.

Ok. I'll say it in the API.md. I think that most of people will use it in the same form because when we wanted to group somethings, they would normally be placed near each other, for example, checkboxes, contact fields, etc. It's not quite logic to group elements between different forms. However, I'll put the clear word in our document to prevent the rare situation.

[hueitan]

There are two more things to do

1. use attribute as a variable (don't repeatedly calling attrs.something)
2. given document about usage of validation-group

Thank you @lvarayut after these ready to merge 😄

🍻

[lvarayut]

Thanks @huei90 for your great review. I'll do as your suggestions and also the following:

1. Comment the code!!
2. Write more tests about provider.validate();

[hueitan]

Thank you @lvarayut @Nazanin1369

Tests are now more important as our project is getting bigger and having a lot of features, so we should take the test cases very seriously and carefully in our future commit.

☀️

[hueitan]

Seems everything is ready, I'm going to merge it. 👍 @lvarayut

[lvarayut]

Thanks @huei :)

On Sunday, December 27, 2015, Huei Tan notifications@github.com wrote:

Seems everything is ready, I'm going to merge it. [image: 👍] @lvarayut
https://github.com/lvarayut

—
Reply to this email directly or view it on GitHub
#175 (comment)
.

[juw177]

Hi, am I missing something here? All this does is hide the error message but the form is still invalid?

checkValid does not take validation groups into account, so how can this work? You can see this on the demo page with the 2 check boxes. Or is this intended behaviour?

[juw177]

Also, this should only be targeting the required expression. eg, If a form field is an email, it makes no sense to allow the user to submit whatever they want just because another element in the group is valid?

[hueitan]

@lvarayut

[lvarayut]

@juw177 Well. It depends on the logic of your application. If you need only one field to be filled out by a user, as shown in the example, it totally makes sense and it's the purpose of using validation-group. The way it works is pretty straight forward as mentioned in the API.md:

The group will be considered as valid if and only if one of them is valid. Otherwise, the group will be marked as invalid.

It didn't hide any error message. If one of the elements is valid, the entire form is still valid.