Validate radio button group not individual inputs.

[y2k4life]

If I do the following there is a blip on the validation.

1. From the Zip Code tab to the Yes & No radio group
2. The individual input Yes has focus, but not checked.
3. Click on No. This will cause a 'blur` event on the Yes input which will cause validation.
4. You will see the validation error blip in the split second going from Yes to No.
5. Then once No is checked the validation passes and the error is removed.

I can understand why my question is can this be fixed and if so how?

[y2k4life]

I just noticed that if I have the focus on the Yes but not checked then move to the right using the cursor key I don't get this behavior.

[jdanyow]

If you want to validate on blur it would work better using <yes-no value.bind="multipleLocations & validate"></yes-no>

Then you'd raise the blur event when the yes-no component loses focus, not when parts of the yes-no component lose focus.

[y2k4life]

How? What if I did not have a yes-no component? How do I blur on components?

[jdanyow]

if you need to validate on blur, and the component that represents your property is made up of two radio inputs, the best thing to do is go ahead and create that yes-no component. Then you can fire blur when your component loses focus and everything will work as you'd expect.

[y2k4life]

Can you show in code rather than words? I'm having a hard time wrapping my brain around how to take a group of HTML inputs and know when I leave one those inputs that I'm leaving the component instead of leaving the one of the inputs to another within the component. How would I write the code or what would the code look like that says you have left the component now when to fire a 'blur' event?

[antonmos]

for the record, #271 (comment) worked for me as follows:

<template bindable="value">
<label repeat.for="opt of [['Yes', true], ['No', false]]">
   <input type="radio" name="foo" model.bind="opt[1]" checked.bind="value"/>${opt[0]}
</label>
</template>

<template>
<require from="components/yes-no.html"></require>
Do you agree?<br/>
<yes-no value.two-way="result & validate"></yes-no>

Binding is working but blur validation is not happening.

[antonmos]

@jdanyow could you please clarify how to fire the 'blur' event?

[antonmos]

ah, looks like #297 is supposed to answer this. Currently, it only links to a solution when the custom element has one focusable element.

[antonmos]

I was able to get it to work by using validateOnChange. yay!

[jdanyow]

http://stackoverflow.com/questions/43894214/aurelia-validation-validating-multiple-checkboxes/43896083