Проверка подлинности jQuery радиостанции Bootstrap

Question

Ive искал вокруг, но не смог найти ответ о том, как я могу проверить использование проверки jquery, что одна из кнопок ДОЛЖНА быть выбрана в группе переключателей начальной загрузки перед отправкой.

У меня есть это как часть формы,

<div id="inputNumDel" name="inputNumDel" class="btn-group" data-toggle="buttons-radio"> 
     <button type="button" id="num7" class="btn ">7</button> 
     <button type="button" id="num8" class="btn ">8</button> 
</div> 

, который дает этот

и это проверочный код, который не работает

$(document).ready(function(){ 

      $("#form").validate({ 
       rules:{      
        inputNumDel:{ 
          required:true, 
        }, 

      },   
      errorClass: "help-block" 
      }); 

    }); 

Answer 1

Вы не можете использовать jquery validate, чтобы сделать элемент кнопки «обязательным».

Вам понадобится флажок или радиокнопка или другой элемент ввода. jQuery mobile имеет виджет checkboxradio, который имеет аналогичный эффект, но использует переключатели или флажки.

Answer 2

мне пришлось решать ту же проблему, и отправил свое временное решение по аналогичному вопросу, здесь:

jQuery validation against twitter bootstrap button group

В то время как вы не можете подтвердить сами (или даже ваша группа кнопок ДИВ) Пуговицы , вы можете использовать кнопки для хранения своего значения в скрытом поле, а затем вместо этого проверить скрытое поле.

Вот рабочий пример, который я сделал для выше связанного ответа: http://jsfiddle.net/geekman/W38RG/18/

В принципе, вы хотите сделать следующее:

• Добавить скрытое поле, чуть ниже btn- группа DIV. Используйте событие click на кнопках в вашей группе btn и установите значение вашего скрытого поля в соответствующее значение в зависимости от кнопки.

• Затем используйте jQuery для подтверждения снова скрытого поля вместо вашей группы кнопок.

• Позвонить validate() с опцией не игнорировать скрытые поля.

Так что-то вроде:

<div id="inputNumDel" name="inputNumDel" class="btn-group" data-toggle="buttons-radio"> 
    <button type="button" id="num7" value="7"class="btn ">7</button> 
    <button type="button" id="num8" value="8" class="btn ">8</button> 
</div> 
<!-- Notice here that I have marked the hidden field as required, so jQuery validate should recognise it as required, allowing you to leave out your required rule --> 
<input required type="hidden" id="inputNum" required="required" /> 

<script type="text/javascript"> 
$(document).ready(function() { 
    //Bind the click event to the parent div containing both buttons. Tell it to fire on any element containing the class btn. 
    $('#inputNumDel').on('click', '.btn', function() { 
     $('#inputNum').val($(this).val()); 
    }); 

    $('#form').validate({ 
     ignore: [], 
     errorClass: "help-block" 
    }); 
}); 
</script>