Submitを選択するとselectpickerドロップダウンにクラスを追加する

Question

"Continue"をクリックしたときに追加/削除されたクラス（input-validation-error）が<div class="btn-group bootstrap-select required"に追加されているドロップダウンを選択しようとしています。

input-validation-errorクラスには、「続行」をクリックすると赤い境界線が表示され、ドロップダウンから選択する必要があることをユーザーに示します。私はselectpickerを使ってBootstrapのドロップダウンリストを作り直しています。jquery validateは検証のために使っています。

.input-validation-error button { 
    border: 1px solid red; 
} 

<select name="country" id="country" class="required selectpicker"> 
     <option value="">Select Country</option> 
     <option value="Afghanistan">Afghanistan</option> 
     [...] 
</select> 


$(function() { 
    $('select[name^="country"]').change(function() { 
    var selValue = $(this).val(); 
    $("#form-jsvalidate").validate().element(this); 
    if (selValue.length > 0) { 
     $(this).next('div').removeClass("input-validation-error"); 
    } 
    else { 
     $(this).next('div').addClass("input-validation-error"); 
    } 
    }); 
}); 

私はそれが$('.btn-submit-val').on('click', function() { var selValue = $('select[name^="country"]').val();のようなものであってもよいが、明らかではないことと、私が試した他のすべてが機能していないので、必要があると考えています。正しい方向の任意の点は非常に高く評価されます。

https://jsfiddle.net/DTcHh/25795/

編集：誰ですか？

Answer 1

エラーメッセージを正確にどこに入力したいのかわかりませんでしたが、あなたのフィドルでいくつかの編集を行いました。

エラーメッセージを表示する場所を明確にしてください。

$(document).ready(function() { 
    $("#form-jsvalidate").validate({ 
     errorClass:'input-validation-error', 
          validClass:'success', 
          errorElement:'button', 
          highlight: function (element, errorClass, validClass) { 
          $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass); 

          }, 
     rules: { 
      "country": { 
       required: true 
      }, 
     }, 
     messages: { 
      "country": { 
       required: "Country is required" 
      } 
     }, 
     submitHandler: function (form) { 
      alert('valid'); 
      return false; 
     } 
    }); 
}); 

$(document).ready(function() { 
    $('#form-jsvalidate').validate().settings.ignore = ':not(select.selectpicker, select:visible, input:visible, textarea:visible)'; 
}); 

$('.btn-submit-val').on('click', function() { 
    $("#form-jsvalidate").valid(); 
    return false; 
}); 

$(function() { 
     $('select[name^="country"]').change(function() { 
      var selValue = $(this).val(); 
      $("#form-jsvalidate").validate().element(this); 
      if (selValue.length > 0) { 
       $(this).next('div').removeClass("input-validation-error"); 
      } 
      else { 
       $(this).next('div').addClass("input-validation-error"); 
      } 
     }); 
     }); 

https://jsfiddle.net/DTcHh/25836/