Required for Checkbox / HTML5

2

I have several input fields of checkbox referring to the interests of the client to mark it (Interest 1, 2, 3, ...), and another with option of All.

I want him to be forced to check one of these fields,

If I put required in a specific field, I force it to mark a field that would be optional.

So I can not put required in any input.

In this case the form is passing in submit without it dialing any, I wanted to oblige it at least to mark some.

If I put radio , the problem is that he can only choose one option, but there are several that he can choose.

Would you have any solution to resolve this without using Javascript , only with HTML5 such as required ?     

asked by anonymous 20.07.2015 / 20:56

1 answer

4

I think only with HTML this is not possible. That is, as you explained in the question, you can not use required because it will force you to check inputs that are not required.

You really have to use JavaScript.

Suggestion:

HTML

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<button type="button">Testar</button>

JavaScript

var inputs = document.querySelectorAll('input');

function verificar() {
    return [].filter.call(inputs, function (input) {
        return input.checked;
    }).length;
}
document.querySelector('button').addEventListener('click', function () {
    var valido = verificar();
    if (!valido) alert('Falta escolher uma checkbox!');
    else alert('Tudo ok!');
});

jsFiddle: link

    
20.07.2015 / 21:12