Как добавить alert?

Question

[Александр]

Здравствуйте.
Есть такой код:

<script>
  function valid(f) {
  return f.p1.checked || f.p2.checked || f.p3.checked || f.p4.checked || f.p5.checked || f.p6.checked || f.p7.checked
}
</script>


<form action="/mail/" method="post">

<input type="checkbox" name="p1" /> Пункт 1<br />
<input type="checkbox" name="p2" /> Пункт 2<br />
<input type="checkbox" name="p3" /> Пункт 3<br />
<input type="checkbox" name="p4" /> Пункт 4<br />
<input type="checkbox" name="p5" /> Пункт 5<br />
<input type="checkbox" name="p6" /> Пункт 6<br />
<input type="checkbox" name="p7" /> Пункт 7<br />

<p style="display: none; color: red;">Отметьте нужный(е) пункт(ы)</p>
 
<p><input type="submit" value=" Отправить " onclick='return valid(this.form)' /></p>
</form>

Он работает, но молча, посетитель может не понять почему нет отправки формы (код я упростил – убрал лишние поля).
Подскажите как в него добавить alert, например: "Отметьте нужный(е) пункт(ы)", который будет срабатывать только если ни один чекбокс не отмечен?
Или как ещё один вариант, как сделать чтобы текст:

<p><p style="display: none; color: red;">Отметьте нужный(е) пункт(ы)</p>

становился видимым при тех же условиях?

Answer 1

[Gor Mkhitaryan]

<script>
    function validateForm(id) {
        var checkboxes = {
            "p1": $('#'+id+ ' > input[name="p1"]').is(":checked"),
            "p2": $('#'+id+ ' > input[name="p2"]').is(":checked"),
            "p3": $('#'+id+ ' > input[name="p3"]').is(":checked"),
            "p4": $('#'+id+ ' > input[name="p4"]').is(":checked"),
            "p5": $('#'+id+ ' > input[name="p5"]').is(":checked"),
            "p6": $('#'+id+ ' > input[name="p6"]').is(":checked"),
            "p7": $('#'+id+ ' > input[name="p7"]').is(":checked"),
        };

        if(!checkboxes.p1   &&
            !checkboxes.p2  &&
            !checkboxes.p3  &&
            !checkboxes.p4  &&
            !checkboxes.p5  &&
            !checkboxes.p6  &&
            !checkboxes.p7 ) {

            alert("Отметьте нужный(е) пункт(ы)");
            return false;
        } else {
            $('#'+id).submit();
        }
    }
</script>

<form action="/mail" method="post" id="mailForm">

    <input type="checkbox" name="p1" /> Пункт 1<br />
    <input type="checkbox" name="p2" /> Пункт 2<br />
    <input type="checkbox" name="p3" /> Пункт 3<br />
    <input type="checkbox" name="p4" /> Пункт 4<br />
    <input type="checkbox" name="p5" /> Пункт 5<br />
    <input type="checkbox" name="p6" /> Пункт 6<br />
    <input type="checkbox" name="p7" /> Пункт 7<br />

    <p style="display: none; color: red;">Отметьте нужный(е) пункт(ы)</p>

    <p><input type="button" value=" Отправить " onclick='return validateForm("mailForm")' /></p>
</form>

Не забудьте подключить jQuery

<script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>

Comments

[Александр]

Большое спасибо, работает.

Answer 2

[Andrew]

Вам нужно чтобы они были все отмечены?
Поставьте всем <input type="checkbox" required> и будет счастье.
Если нужно кол-во > цифра, то по сабмиту превентдеф и смотрите сколько отмеченных и там уже показывайте блок с ошибкой
UP:

document.querySelector('form').addEventListener('submit',function(e){
e.preventDefault();
this.querySelectorAll('input[type="checkbox"]:checked').length?console.log('valid'):console.log('not valid');
});

Comments

[Александр]

Нет, здесь отмечено может быть любое количество и в любом порядке, но хотя бы один должен быть отмечен. Если ни один не отмечен - блокируется отправка сообщения, но как я уже написал в вопросе, молчком. Надо, чтобы одновременно с блокировкой появлялось сообщение.

[Andrew]

Александр,

document.querySelector('form').addEventListener('submit',function(e){
e.preventDefault();
this.querySelectorAll('input[type="checkbox"]:checked').length?console.log('valid'):console.log('not valid');
});

[Александр]

Andrew, Спасибо, но не получилось у меня ничего – не работает.

[Andrew]

Александр, что не получилось?