html5 «требуется» атрибут для смешанного радио/текст

Question

Я проектирование формы, которая имеет, среди прочего, следующие элементы:

<div> 
    <div class="radio-list"> 
     <label><input type="radio" name="ftp_directory" id="ftpdir_public_html" value="public_html"> <strong>public_html</strong> directory</label> 
     <label><input type="radio" name="ftp_directory" id="ftpdir_blank" value="."> <strong>Root</strong> directory </label> 
     <label><input type="radio" id="ftpdir_custom" value=""> Other directory (please specify)</label> 
    </div> 
    <input name="ftp_directory" class="form-control" type="text" disabled="disabled" aria-disabled="true"> 
</div> 

включить последний <input> элемент текста при проверке 3-го радио (через jQuery), и все в порядке.

То, что я хочу сделать, это установить атрибут required в правильном пути, так что vaildates, если любой из первых двух радио-кнопки проверяется или 3-й радио проверяется и input имеет некоторый текст.

Примечание: Я знаю, что могу сделать это с некоторым кодом подтверждения JS/JQuery, но я хотел бы сделать это в чистом HTML5.

Answer 1

Я решил через jQuery, так как сказал, что это невозможно с HTML5.

Вот мое решение:

$(document).on('change', 'input[type="radio"][name="ftp_directory"]', function(e){ 
    var radio_id = $(this).attr('id'); 
    if (radio_id == 'ftpdir_custom') 
    { 
     $('#ftp_directory_custom').prop('disabled', false); 
     $('#ftp_directory_custom').prop('required', true); 
     $('input[type="radio"][name="ftp_directory"]').removeProp('required').removeAttr('aria-required'); 
    } 
    else 
    { 
     $('#ftp_directory_custom').prop('disabled', true); 
     $('#ftp_directory_custom').removeProp('required'); 
     $('input[type="radio"][name="ftp_directory"]').prop('required', true); 
    } 
}); 

Атрибут name должен быть разным, во всяком случае, для радио-кнопок и ввода текста. Кроме того, из-за последнего необходимо определить и дифференцировать параметры запроса на стороне сервера соответственно. Усовершенствования приветствуются.

Answer 2

Как уже говорилось, вы не можете сделать это с помощью переключателей + ввода текста. Тем не менее, вы можете достичь нечто подобное с data lists и одно текстовое поле:

<input type="text" name="ftp_directory" list="preselection" required> 
<datalist id="preselection"> 
    <option>public_html</option> 
    <option value=".">current directory</option> 
</datalist> 

Логически это отвечает именно вашим ограничениям. Однако это может быть не стилистически то, что вы ищете.