Jquery Validate + Tooltipster를 사용하여 라디오 버튼의 유효성을 검사 할 때

Question

post의 예제를 기반으로 Jquery Validation Plugin 및 Tooltipster Plugin을 사용하고 있습니다.

두 플러그인이 잘 작동하는지 확인하려면 입력 유형을 확인해야하지만 제출 버튼을 클릭하여 한 쌍의 라디오 버튼의 유효성을 검사 할 때 명시 적으로 필수 항목 임에도 불구하고 라디오 버튼을 선택하지 않아도 양식이 제출됩니다.

이

내가

<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> 

을 확인하려고 해요 형태이며,이 때문에 Tooltipster이 유효성 검사가 완벽하게 작동 플러그인을 사용하지 않고

<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> 

가 이상해 검증을 만드는 스크립트입니다. 나는 두 플러그인의 설명서를 읽었하지만 난 이유를 당신은 type="radio" 입력에 Tooltipster를 초기화하는 것을 잊었다 사전

Answer 1

에

감사를 발견 할수 없어. ... 아래의 jQuery 셀렉터의 type="text" 주목

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

당신은 이런 일을 수행해야합니다

...

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

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

또는 경우에 ' 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을 참조하십시오.