Значение кнопки радио не равно

Question

Я делаю сайт с волшебной веб-формой, разбитой на несколько fieldset. Из-за этого атрибут required для input не работает до тех пор, пока вы не дойдете до последнего слайда, где будет отправлена ​​полная форма. Однако, поскольку отображается только текущий fieldset, вы не получите оповещение, если забыли заполнить required в более раннем fieldset.

Именно поэтому я пытаюсь реализовать некоторый jQuery, который проверяет значение input, имеющего атрибут required, поэтому пользователь не попадает на страницу 8 и пытается отправить форму, не зная, что он/она забыла заполнить required на странице 2.

Проблема, с которой я столкнулся, - это вход radio. Я знаю, что мне нужно добавить только один required во весь список атрибутов для работы в HTML, но поскольку мой jQuery проверяет значение [required], не имеет значения, какую радиокнопку я выбираю, значение всегда будет равно Я добавил, что требуется.

JSFIDDLE

Вот некоторые HTML

<div class="description"> 
    Pladstype: 
</div> 
<div class="descriptionData"> 
    <select id="form_billet_pladstype" required> 
     <option value="" disabled selected>Vælg pladstype</option> 
     <option value="0">Ståpladser</option> 
     <option value="1">Siddepladser</option> 
     <option value="2">Sidde- og ståpladser</option> 
    </select> 
</div> 

<div class="description"> 
    Nummererede pladser: 
</div> 
<div class="descriptionData"> 
    <div class="descriptionData"> 
     <input required type="radio" value="ja" name="form_billet_nummererede" id="form_billet_nummererede_ja" class="descriptionData janej valid"><label for="form_billet_nummererede_ja">Ja</label> 
     <input type="radio" value="nej" name="form_billet_nummererede" id="form_billet_nummererede_nej" class="descriptionData janej valid"><label for="form_billet_nummererede_nej">Nej</label> 
    </div> 
</div> 

<div class="description"> 
    Billet-nr.: 
</div> 
<div class="descriptionData"> 
    <select name="form_ticketType" id="form_ticketType" required> 
     <option value="" disabled selected>Vælg billetnr.</option> 
     <option value="0">Type 0 - Unummereret plads</option> 
     <option value="14">Type 14 - Unummererede m. niveau, række og plads</option> 
     <option value="15">Type 15 - Alle felter</option> 
    </select> 
</div/> 

В JQuery

var requiredFields = $(element).find('#' + stepName + ' [required]') 
requiredFields.each(function(idx, elem) { 
    var val = $(elem).val(); 
    alert(val); 
}); 

теперь я понимаю, после написания этого вопроса, что значение для radio всегда один, на который я добавил required, но как исправить это, так что на самом деле оно имеет значение null, когда страница загружается и только получает значение checked (или реальное значение, но не обязательно) при выборе одного из параметров?

Легкий выход - это иметь один флажок, выбранный при загрузке, после чего он может выбрать другой, но мне интересно, можно ли начать с пустого значения для радиовхода, но все же использовать required.

Answer 1

var requiredFields = $(element).find('#' + stepName + ':required') 

Это будет ваше решение.

Answer 2

Я исправил проблему, добавив дополнительную, скрытую кнопку radio. Эта радиокнопка имеет атрибут required, поэтому, если не выбраны ни Да, ни Нет, HTML все равно будет считать эти радиокнопки пустыми.

Поскольку значение скрытой радио кнопки null, код, который будет проверять, является ли значение не равным null, зарегистрирует это как пустое.

Я добавил еще несколько строк jQuery, которые удаляют required со скрытой радиокнопки и добавляют их к выбранному, поэтому я фактически получаю значение выбранного (хотя это действительно не обязательно , достаточно просто узнать, что что-то выбрано).

$('#form_billet_nummererede_ja').bind('click', function(e) { 
    $('#form_billet_nummererede_hidden').removeAttr('required'); 
    $('#form_billet_nummererede_ja').attr('required', true); 
}) 

$('#form_billet_nummererede_nej').bind('click', function(e) { 
    $('#form_billet_nummererede_hidden').removeAttr('required'); 
    $('#form_billet_nummererede_nej').attr('required', true); 
}) 

Updated fiddle.