Is it possible in the browser to make check of the checkbox "i agree" and prohibit sending without using JS (disabled)? For example, using CSS means to hide the Submit button, but at the same time so that the form is not submitted by pressing Enter.

You need to get a working form without JS, and not to disable sending for users with disabled JS.

<form method="POST" id="target"> <input type="text" name="phone"/> Номер телефона <br/> <input type="checkbox" name="agree" value="1" id="agree"/> Я даю согласие на обработку данных <br/> <input type="submit" value="отправить"/> </form>

I will give an example of СSS code in which I don’t like that 2 submit buttons are used (this is tolerable), but the fact that sambit occurs by pressing enter in the phone field is not acceptable

 <style> .btn,.btn-disabled { float:left; margin-right:5px; } .checkbox:checked~.btn-disabled { display: none; } .checkbox:not(:checked)~.btn { display: none; } </style> <form method="POST" id="target"> <input type="text" name="phone"/> Номер телефона <br/> <input type="checkbox" class="checkbox" id="agree"> Я согласен с правилами <button type="button" class="btn">Кнопка</button> <button type="button" class="btn-disabled" disabled>Кнопка</button> </form>

  • I'm afraid that Enter ban does not work. I would not bother and just check the box on the server, giving an error if it is not available - andreymal
  • Although here the answers hint at the required, can experiment with it - andreymal
  • @andreymal well, I didn’t know until recently that checkbox check can be done on CSS without JS, but it turned out possible. - Nsk

1 answer 1

While others bring the wording of the question to an absurdity, it turns out that simply adding the required tick is more than enough

 form:invalid input[type="submit"] { opacity: 0.25; } 
 <form method="POST" id="target"> <input type="text" name="phone"/> Номер телефона <br/> <input type="checkbox" name="agree" value="1" id="agree" required /> Я даю согласие на обработку данных <br/> <input type="submit" value="отправить"/> </form>

(But, of course, do not forget about duplicate checks on the server, because nothing prevents the user from deleting this required through the developer tools in the browser)

  • You were right, I did not fully understand the question. Missed the moment which checkbox to check. - E_K
  • Ditch your hair! I knew about required, but he didn’t understand what he was working on the checkbox. But form: invalid for me to open. - Nsk