jQueryの検証がBootsrapsと競合しています。選択しました

Question

アプリケーションの選択ボックスがselected-selectと競合しています。以下はサンプルコードです。

HTML

<form name="test1" id="test"> 
     <div class="form-group"> 
         <label class="control-label col-sm-3" for="pwd">Course code:</label> 
         <div class="col-sm-9"> 
          <select name="search_course" data-placeholder="Select Courses" id="search_course" class="chosen-select form-control" tabindex="8" style="width:60% !important;" <?php 
//       if ($readOnly) { 
//        echo 'readonly'; 
//       } 
          ?>> <option value=""> Select</option> 
             <?php 
             if (!empty($courses)) { 
              foreach ($courses as $values) { 
               ?> 
             <option value="<?php echo $values['idvs_crs_id']; ?>" <?php 
             if ($values['idvs_crs_id'] == $post_values['search_course']) { 
              echo 'selected'; 
              $selected_course_name = $values['idvs_crs_code'] . ' - ' . $values['idvs_crs_title']; 
              $selected_course_code = $values['idvs_crs_code']; 
             }; 
             ?> ><?php echo $values['idvs_crs_code'] . ' - ' . $values['idvs_crs_title']; ?></option> 
               <?php 
              } 
             } 
             ?> 
          </select> 
         </div> 
        </div> 
    </form> 

のjQuery

$.validator.setDefaults({ ignore: ":hidden:not(select)" }); 
$("#test1").validate({ 
     onkeyup: false, 

rules : { 
    search_course:{ 
     required: true, 
} 
}, 
messages: { 
    search_course: { 
     required: "Please select a course code" 
    }, 
} 
}); 

これを解決するために、私はstackoverflowのを検索し、以下の

$.validator.setDefaults({ ignore: ":hidden:not(select)" }); 

を置くために解決策を見つけた私はあることを追加しました.validateを超えて動作していますが、問題はエラーが整列していないため、選択ボックスがシフトされてエラーのための領域が確保されます。エラーは選択ボックスの下にあったはずです。これを解決する解決策はありますか？以下は私が直面している問題のスクリーンショットです。

Answer 1

私は何が必要だと思うshowErrors方法を編集することにより、HTML上のエラーの場所を変更することです。

$.validator.setDefaults({ 
    showErrors: function(errorMap, errorList) { 
     if (errorList.length < 1) { 
      // clear the error if validation succeeded 
      $('label.error').remove(); 
      return; 
     } 
     $.each(errorList, function(index, error) { 
      $(error.element).next('label.error').remove(); 
      $(error.element).after(
       $('<label/>') 
        .addClass('error') 
        .append($('<em/>').text('this is some em')) 
        .append(error.message) 
      ); 
     }); 
    } 
}); 

working exampleを確認してください。

出力されたHTMlを共有して、この機能をマークアップに適用できますか？

===

この回答はDarin Dimitrovからのものです。完全な答えを確認してくださいhere