jQuery Validation on input-append (Twitter Bootstrap)

사이트에 트위터 부트 스트랩을 사용하고 jquery.validate를 사용합니다.jQuery Validation on input-append (Twitter Bootstrap)

입력 요소에 버튼이 추가 된 입력 요소가 있습니다. 이것은 js 유효성 검사에서 필수 필드입니다.

코드는 다음과 같습니다

<div class="controls"> 
<div class="input-append"> 
    <input tabindex="1" name="url" class="input-large" id="url" type="text" placeholder="http://somewebsite.com" autocapitalize="off"> 
    <button class="btn" type="button" name="attach" id="attach" />Fetch</button> 
</div> 
</div>

유효성 검사 오류 클래스는 JQuery와 유효성 검사 규칙을 사용하고 다른 모든 요소를 완벽하게 작동합니다. 하지만 오류의 범위는 입력 요소 바로 뒤에 추가됩니다. 대부분의 경우이 값은 절대적으로 좋습니다. 그러나이 입력 필드의이 인스턴스에서는 첨부 된 단추를 분리하기 때문에 디스플레이가 위로 움직입니다. 다음은

내가 정말이 하나 개의 요소에 대한 오류 메시지에 다른 클래스를 적용 할 필요가 enter image description here (전후) 내가 무엇을 의미하는지의 이미지하지만 난 방법을 알아낼 수 있다면 들어 봤나입니다. 오류 이벤트는 입력 필드에서

errorClass: "help-inline", 
      errorElement: "span", 
      highlight:function(element, errorClass, validClass) { 
       $(element).parents('.control-group').addClass('error'); 
      }, 
      unhighlight: function(element, errorClass, validClass) { 
       $(element).parents('.control-group').removeClass('error'); 
       $(element).parents('.control-group').addClass('success'); 
      }

url:{ 
required:true 
},

및 메시지는 다음과 같습니다

messages:{ 
url:{ 
    required:"Enter URL beginning with http" 
},

출처

2012-07-06 422

당신은 errorPlacement 옵션을 사용할 수 있습니다. 이 예에서

errorPlacement: function (error, element) { 
    error.appendTo(element.parents(".controls:first")); 
}

은 에러 요소는 부모 DIV .controls에 첨부한다.

출처

2012-07-12 06:29:28 odupont

odupont에서 말한 것처럼 errorPlacement의 구현을 직접 추가 할 수 있지만 주어진 코드는 양식의 일반적인 입력 필드에서 작동하지 않습니다. 다음 구현을 사용하면 오류 입력이 네이티브 입력 필드와 입력 추가 필드 모두에서 작동합니다!

errorPlacement: function (error, element) { 
    if (element.parent().is('.input-append')) 
     error.appendTo(element.parents(".controls:first")); 
    else 
     error.insertAfter(element); 
}

출처

2013-02-09 22:59:05 user579089

정확히 사용자 579089 및 odupont에서 말한대로!

저는 방금 고쳐서 누군가에게 고생했는지 확인하기 위해 실행했습니다.

$("#myform").validate({ 
     highlight: function(label) { 
      $(label).closest('.control-group').addClass('error'); 
     }, 
     errorPlacement: function (error, element) { 
      if (element.parent().hasClass("input-append")){ 
       error.insertAfter(element.parent()); 
      }else{ 
       error.insertAfter(element); 
      } 
     },   
     onkeyup: false, 
     onblur: false, 
     success: function(label) { 
      $(label).closest('.control-group').removeClass('error'); 
     } 
    });

enter image description here

: 여기에 내 코드입니다

출처

2013-03-27 21:33:16

jQuery Validation on input-append (Twitter Bootstrap)

답변

관련 문제