"선택한"플러그인으로 필수 필드로 강조 표시 할 수 있습니까?

Question

드롭 다운 코드를 따르고 필요에 따라이 필드를 원하지만 유효성 검사를하지 않습니다. 양식을 제출하면

<select id="mood" rel="chosen" required="required" name="moodName"> 
<option value="">Select Option</option> 
<option value="69">AGITATED</option> 
<option value="115">ALOOF</option> 
<option value="46">AMUSED</option> 
</select> 

검증 코드

$('#Form').validate(); 

방법 선택이 끝난 필드의 필수 항목으로 유효성을 검사? 처럼 "이 필드는 필수"입니다.

Answer 1

사용 <form> 태그로 JSFIDDLE

<form> 
<select id="mood" rel="chosen" required name="moodName"> 
<option value=""></option> 
<option value="">Select Option</option>  
<option value="69">AGITATED</option> 
<option value="115">ALOOF</option> 
<option value="46">AMUSED</option> 
</select> 
<input type="text" required></input> 
<input type="submit" value="pass"> 
</form> 

Answer 2

은 '선정'플러그인은 약간의 HTML 마크 업 & 원래 HTML <select>을 숨 깁니다 만듭니다.

$.validator.setDefaults({ 
    ignore: ":hidden:not(select)", 
    highlight: function(element, errorClass, validClass) { 
     if (element.type === "radio") { 
      this.findByName(element.name).addClass(errorClass).removeClass(validClass); 
     } else { 
      $(element).addClass(errorClass).removeClass(validClass); 

      // chosen specific 
      if($(element).hasClass('chzn-done')){ 
       //$(element).parent().find('.chzn-container').addClass(errorClass).removeClass(validClass); 
       $('#' + element.id + '_chzn').addClass(errorClass).removeClass(validClass); 
      } 
     } 
    }, 
    unhighlight: function(element, errorClass, validClass) { 
     if (element.type === "radio") { 
      this.findByName(element.name).removeClass(errorClass).addClass(validClass); 
     } else { 
      $(element).removeClass(errorClass).addClass(validClass); 

      // chosen specific 
      if($(element).hasClass('chzn-done')){ 
       $('#' + element.id + '_chzn').removeClass(errorClass).addClass(validClass); 
      } 
     } 
    } 
}); 

그리고 몇 가지 예제 CSS :

우리가/우선 기본 'higlight'& 'unhiglight'기능을 수정해야 (CSS 클래스에는 .error을 추가하여) 오류로/마크 선택 요소를 강조 표시

을

.chzn-container.error a{ 
    border: 1px solid #ff0000; 
} 

Answer 3

나는 즉, 012,362의 라인을 찾을 수 https://github.com/harvesthq/chosen/issues/2075#issuecomment-193805605

에 언급 된 해결 방법을 사용하여 종료

this.form_field_jq.hide().after(this.container); 

을 말한다 그리고 대신에 그것을 숨길 수있는 브라우저를 이야기의 select 요소 "보이지을"할 수있는 해킹

this.form_field_jq.css('position', 'absolute').css('opacity', 0).after(this.container); 

으로 교체. 따라서 Chrome은 '목록에서 항목을 선택하십시오.'라는 메시지를 표시해야 할 때 요소를 찾을 수 있습니다.