Проблема с использованием Jquery Validate + Tooltipster для проверки радиокнопок

Question

Я использую Jquery Validation Plugin и Tooltipster Plugin, основанные на примере, найденном в этом post.

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

Это форма, которую я пытаюсь проверить

<form id="form1" method="post" action=""> 

     <table class="bordered"> 

      <tbody> 
       <tr> 
         ... 
         <div id="vtelfonos"> 
          <label for="telf_local">Local</label> 
          <input type="radio" id="telf_local" name="telf"/> 

          <label for="telf_movil">Movil</label> 
          <input type="radio" id="telf_movil" name="telf"/> 

          <div id="raytel" style="padding-left:100px"> 
           <span style="float:left"> 
            <label for="cel1"></label> 
            <select name="cel1" id="cel1" disabled="disabled" style="padding-bottom:1px; margin-right:2px" required> 
             <option value="0426">0426</option> 
             <option value="0424">0424</option> 
             <option value="0416">0416</option> 
             <option value="0414">0414</option> 
             <option value="0412">0412</option> 
            </select> 
           </span> 
           <span style="float:left"> 
            <label for="telefono"></label> 
            <input name="telefono" id="telefono" type="text" disabled="disabled" maxlength="7" style="width:58px" onkeyUp="return ValNumero(this);" required/> 
           </span> 
           </div> 

          <div id="raytel2" style="display:none; padding-left:100px" > 
           <p> 
           <!--<label for="cel11" ><span style="float:left"> 
           <input type="text" name="cel11" id="cel11" size="3px" maxlength="4" /> 
           </span></label>--> 
           <span style="float:left" id="sprytextfield5"> 
            <label for="cel11"></label> 
            <input type="text" name="cel11" id="cel11" maxlength="4" style="margin-right:2px; width:50px" disabled="disabled" onkeyUp="return ValNumero(this);" required/> 
            <span class="textfieldRequiredMsg"></span> 
           </span> 

           <label for="cel1" > 
            <span style="float:left"></span> 
           </label> 
           <span id="sprytextfield44"> 
            <label for="telefono11"></label> 
            <input id="telefono11" name="telefono11" type="text" disabled="disabled" id="telefono11" onkeyUp="return ValNumero(this);" maxlength="7" style="width:58px" required /> 
           </span> 
           </p> 
          </div> 
         </div> 
          <div id="telefonoR" style="display:none"> 
          <input size="11" name="Rtelefono" type="text" disabled="disabled" id="Rtelefono" maxlength="11" size="10px"/> 
          </div> 
          </td> 
         </tr> 

         </div> 

        </td> 
       </tr> 


      </tbody> 
     </table> 

    </form> 

И это скрипт, который делает проверку

<script> 
$(document).ready(function() { 
    // initialize tooltipster on text input elements 
    $('#form1 input[type="text"]').tooltipster({ 
     trigger: 'custom', 
     onlyOne: false, 
     position: 'right' 
    }); 


    $("#form1").validate({ 
     errorPlacement: function (error, element) { 
      var lastError = $(element).data('lastError'), 
       newError = $(error).text(); 

      $(element).data('lastError', newError); 

      if(newError !== '' && newError !== lastError){ 
       $(element).tooltipster('content', newError); 
       $(element).tooltipster('show'); 
      } 
     }, 
     success: function (label, element) { 
      $(element).tooltipster('hide'); 
     }, 
     rules: { 
      email2: { 
       required: true, 
       email: true 
      }, 
      donante: { 
       required: true, 
       minlength: "2" 
      }, 
      telf: "required", 
      cel11: { 
       required: true, 
       minlength: "3" 
      }, 
      telefono11: { 
       required: true, 
       minlength: "7" 
      }, 
      telefono: { 
       required: true, 
       minlength: "7" 
      }, 
      Rtelefono: { 
       required: true, 
       minlength: "11" 
      } 

     }, 
     messages: { 
      email2:{ 
       required: "Campo Requerido.", 
       email: "Introduzca un email valido." 
      }, 
      donante: { 
       required: "Campo Requerido.", 
       minlength: "Debe tener min. 2 letras." 

      }, 
      telf: "Campo Requerido.", 
      cel11: { 
       required: "Campo Requerido.", 
       minlength: "Debe tener 3 digitos." 
      }, 
      telefono11:{ 
       required: "Campo Requerido.", 
       minlength: "Debe tener 7 digitos." 
      }, 
      telefono: { 
       required: "Campo Requerido.", 
       minlength: "Debe tener 7 digitos." 
      }, 
      Rtelefono: { 
       required: "Campo Requerido.", 
       minlength: "Debe tener 11 digitos." 
      } 

      } 
}); 

}); 
</script> 

странно, потому что без использования Tooltipster плагин это проверка работает отлично. Я читал документацию обоих плагинов, но я не могу найти причину

Заранее спасибо

Answer 1

Вы забыли инициализировать Tooltipster на type="radio" входов. Обратите внимание, что type="text" в селекторе JQuery ниже ...

$('#form1 input[type="text"]').tooltipster({... 

Вам нужно сделать что-то вроде этого ...

$('#form1 input[type="text"], #form1 input[type="radio"]').tooltipster({... 

DEMO: http://jsfiddle.net/9qM6P/

Или если вы» d как различные варианты позиционирования для кнопок radio, прикрепите его отдельно ...

$('#form1 input[type="radio"]').tooltipster({ // attach to radio groups 
    trigger: 'custom', 
    onlyOne: false, 
    position: 'top', // position for radio button groups 
    offsetX: 0, // tweak horizontal position for radio button groups 
    offsetY: 0 // tweak vertical position for radio button groups 
}); 

DEMO: http://jsfiddle.net/9qM6P/1/

Вы также можете использовать offsetX, offsetY и position опций для настройки размещения дополнительно. См. options.