Support radios & checkboxes

[garygreen]

Acts a bit strangely at the moment. Work on supporting radios and checkboxes.

[RichAyotte]

For radio, could we change https://github.com/garygreen/dominar/blob/master/src/dominar.js#L79 to:

validating = this.$form.find('[name="' + validating + '"]');
if (validating.type === 'radio') {
    validating = this.$form.find('[name="' + validating + '"]:checked');
}

Querying the DOM twice isn't very nice though. I think we'd have to specify the field type upon creation to avoid the double query.

[garygreen]

I think checkboxes and radios will need a bit more than that to get it to work nicely. The idea is to have one DominarField which will contain all the options in $field.

I think maybe this https://github.com/garygreen/dominar/blob/master/src/dominar.js#L411 could be changed:

/**
 * Get value of field
 *
 * @return {mixed}
 */
getValue: function() {
    var type = this.$field[0].type;
    if (type == 'radio' || type == 'checkbox')
    {
        return this.$field.filter(':checked').val();
    }
    return this.$field.val();
},

[garygreen]

Seems to work nicely. Only thing need to be careful of is placement of help-block and feedback icons. You'll need to place these manually for checkboxes / radios for now.

https://github.com/garygreen/dominar/commit/b495c36e88746b10e32c9f773f42160efd6e66c2

[RichAyotte]

Thanks, it's almost working for me. I'm getting quirky behaviour with the following.

        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
            <input
                id="isEmailConsentYes"
                name="isEmailConsent"
                type="radio"
                value="Yes"
            > Yes
            </label>
            <label class="btn btn-default">
            <input
                id="isEmailConsentNo"
                name="isEmailConsent"
                type="radio"
                value="No"
            > No
            </label>
        </div>

    Dominar.register('required_radio', function(value) {
        console.debug(value);
        return value !== 'undefined';
    }, 'Selection is required.');

        isEmailConsent: {
            rules: 'required_radio'
            , customMessages: {
                required: 'Email consent field is required.'
            }
        }

It returns the value of the first button clicked and undefined for the other button.

For instance, when I click the Yes button first, the value 'Yes' is returned and undefined when I click the No button. If I click the No button first, 'No' is returned and undefined for the Yes button.

[garygreen]

btw how come you've defined a custom rule for required radio, as opose to just using the required rule?

[RichAyotte]

required always returned success whether a radio button was selected or not.

[garygreen]

Even after that recent commit that I done?

[RichAyotte]

The patch works. I had some other lingering that was interfering. Thanks.

[RichAyotte]

After further testing, I found that the first radio/checkbox checked was the only one affected. I've instead added a getField function because with radio and checkbox buttons with all the same name, we need to determine the value of the specific input selected. See https://github.com/garygreen/dominar/pull/18

[RichAyotte]

Here's some SASS that's helped me as well.

.checkbox {
    .help-block {
        display: none;
    }

    // Only show the first control feedback in a list of checkboxes.
    &:not(:first-child) {
        .form-control-feedback {
            visibility: hidden;
        }
    }
}

[garygreen]

You shouldn't need to do that because you can customise the placement of the help-block and form-control-feedback by simply adding them in your markup within the container (form-group). Dominar will automatically pick up on those elements and not attempt to add another one