2014-01-17 19 views
5

ブートストラップのselect pluginとjQueryの検証に問題があります。私が値を選択すると、エラーメッセージThis field is requiredが削除されない通常の検証(ブートストラップを選択しないプラグイン)は、値の選択後にエラーメッセージが自動的に削除されます。この問題を解決するには?選択値の後にjqueryの検証エラーメッセージが表示されない

JSFIDDLE

HTML:

<form id="myform"> <----With Select Plugin 
    <select name="year" class="selectpicker"> 
     <option value="">Year</option> 
     <option value="1">1955</option> 
     <option value="2">1956</option> 
    </select> 
    <br/> 
    <input type="submit" /> 
</form> 
<form id="myform1"> <----Without Select Plugin 
    <select name="fruit"> 
     <option value="">Year</option> 
     <option value="1">1955</option> 
     <option value="2">1956</option> 
    </select> 
    <br/> 
    <input type="submit" /> 
</form> 

JS:

$(document).ready(function() { 
    $('.selectpicker').selectpicker(); 


    $('#myform').validate({ // initialize the plugin 
     ignore: [], 
     rules: { 
      year: { 
       required: true 
      } 
     }, 
     errorPlacement: function(error, element) { 
      if (element.attr("name") == "year") { 
       error.insertAfter(".bootstrap-select"); 
      } else { 
       error.insertAfter(element); 
      } 
     }, 
     submitHandler: function (form) { // for demo 
      alert('valid form submitted'); // for demo 
      return false; // for demo 
     } 
    }); 
}); 
// just for the demos, avoids form submit 
jQuery.validator.setDefaults({ 
debug: true, 
success: "valid" 
}); 
$("#myform1").validate({ 
rules: { 
fruit: { 
required: true 
} 
} 
}); 

答えて

7

あなたが変更に妥当性をチェックする必要があり

$('.selectpicker').selectpicker().change(function(){ 
    $(this).valid() 
}); 

デモ:Fiddle

0

ここでは、この

$('select').change(function(){ 
    if ($(this).val()!="") 
    { 
     $(this).valid(); 
    } 
}); 

Fiddle

で試してみてください
関連する問題