No hint on radiobuttons when required

[bluepuma77]

When using required=true on type radiobuttons the browser does not show a hint and does not prevent submitting.

Instead a jsonform error is created. I would expect a hint and that it does not submit until a selection is taken.

How to reproduce:

1. I have 3 fields: text, radiobuttons, birthdate

{
    "schema": {
        "name": {
            "title": "Name",
            "type": "string",
            "required": true
        },
        "birthdate": {
            "type": "string",
            "title": "Birth date",
            "required": true
        },
        "q1": {
            "type": "string",
            "title": "Question",
            "enum": [
                "yes",
                "no"
            ],
            "required": true
        }
    },
    "form": [
        {
            "key": "name",
            "type": "text"
        },
        {
            "key": "q1",
            "type": "radiobuttons",
            "activeClass": "btn-success"
        },
        {
            "key": "birthdate",
            "type": "date"
        },
        {
            "type": "submit",
            "title": "Submit"
        }
    ]
}

2. When submitting empty, only field 1 and 3 are marked, field 1 gets a hint. Required field 2 is ignored.

3. When field 1 is filled, only field 3 is marked and gets a hint. Required field 2 is ignored.

4. When field 1 and 3 are filled, I can submit the form and receive a jsonform error.

Using jquery-3.5.1, bootstrap v4.4.1 and latest underscore.js and jsonform.js, jsv.js from jsonform repo.

    <script src="/static/js/jquery-3.5.1.min.js" ></script>
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script src='/static/js/underscore-min.js'></script>
    <script src='/static/js/jsv.js'></script>
    <script src='/static/js/jsonform.js'></script>

<style>
    .jsonform-required>label:after {
        content: ' *';
        color: red;
    }
    .btn-default {
        color: #343a40;
        background-color: transparent;
        background-image: none;
        border-color: #343a40;
    }
</style>

[bluepuma77]

Some steps forward. I figured out that I need a CSS class to display the error with the radiobuttons.

    .error {
        border: 2px solid red;
        border-radius: .25rem;
    }

The hint is only displayed when the other fields are correctly filled out. And it still creates a jsonform error, where the others do not.

[bluepuma77]

Funny, the activeClass is used on the header above the buttons when you click it. Test it in the official demo.

[tchapi]

Hi @bluepuma77

Thanks for your report. I'm not entirely sure why this happens but I think it may be related to input group validation on the bootstrap side (https://getbootstrap.com/docs/4.5/components/forms/#validation); What do you think ?