添加類selectpicker下拉提交

Question

我試圖讓這裏的下拉菜單添加/刪除類（input-validation-error）添加到<div class="btn-group bootstrap-select required"單擊「繼續」時，vs只有當下拉選擇更改。

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/