jQuery, запретить отправку формы, затем продолжить - PullRequest
Новая
       8

jQuery, запретить отправку формы, затем продолжить

0 голосов
/ 17 марта 2020

У меня есть простая форма с 2-мя переключателями и флажком. Флажок зависит от переключателя. Это означает, что если установлен переключатель с id = "rd1", флажок также должен быть установлен, в противном случае форма не должна быть отправлена. Если установлен переключатель с id = "rd0", форму можно отправить.

Вот как это написано: 

<form>
<input type="radio" name="rd" value="0" id="rd0" required="required" />
<input type="radio" name="rd" value="1" id="rd1" required="required" />

<input type="checkbox" name="ckbx" value="sample_value" id="ck" />

<button type="submit" name="send" id="sbmt" >Submit Me!</button>
</form>

Итак, теперь я написал и протестировал 2 части кода с использованием jQuery, но каждый из них работает по-разному.

Первый: 

$('#sbmt').click(function(event){
        event.preventDefault();
        if($('#rd1').is(':checked') && $('#ck:checked').length == 0){
            alert('You didn't select the checkbox! /facepalm ');
        }else{
            $('form').submit();
        }
    });

Этот фрагмент кода в любом случае отправляет форму! Если я не выберу ни одну из переключателей, это даже не вызовет тревогу браузера для атрибута required.

Теперь второй фрагмент кода: 

$('form').submit(function(event){
        event.preventDefault();
        if($('#rd1').is(':checked') && $('#ck:checked').length == 0){
            alert('You didn't select the checkbox! /facepalm ');
        }else{
            $('form').submit();
        }
    });

Это, с другой стороны, отлично показывает этот сигнал тревоги, когда if условие истинно. Но он не отправит форму, когда это не так. Само собой разумеется, что атрибут переключателей required здесь работает безупречно.

Ваша помощь оценена на 100%. Спасибо

1 Ответ

0 голосов
/ 17 марта 2020

Я думаю, что вы ошиблись с event.preventDefault (). 

$('form').submit(function(event){
        if($('#rd1').is(':checked') && $('#ck:checked').length == 0){
            event.preventDefault(); // prevent only when condition is true, otherwise submit
            alert('You didn't select the checkbox! /facepalm ');
        }
});
...