jquery validation with datepicker, проблемы с подсветкой

Question

У меня есть два поля в моей форме. один - простой вход для имени, а другой - с «нажимом», «bootstrap datepicker». Я решил использовать плагин проверки jquery на нем, поэтому, когда первое «имя» остается пустым, оно становится красным, а для второго «date_birth», если в нем остается значение по умолчанию, оно также становится красным. Поэтому вам нужно вставить имя, и вы должны выбрать какую-то дату, чем по умолчанию.

Я добавил errorPlacement и правила успеха, которые выполняются, как я описал. Но проблема в моем поле «date_birth». он становится красным, когда вы не выбираете какую-либо другую дату, но, во второй раз, после отправки, если вы выберете какую-то другую дату, которая верна. Он не становится зеленым, как выше поле 'имя' ....

Вот ситуация в jsfiddle: http://jsfiddle.net/dzorz/5xgfm/

HTML:

<form class="form-horizontal" id="gold_form" method='post' action='/start_ajax/addgold/'> 
<fieldset> 
    <span class="label-f">Name</span> 
    <input type="text" class="span4" id="name" name="name"> 
    </br> 
    <span class="label-f">Date of birth</span> 
    <div class="input-append date notification" id="date_birth_picker" data-date="1980-01-01" data-date-format="yyyy-mm-dd"> 
    <input class="span2" size="16" type="text" value="1980-01-01" readonly="" id="date_birth" name="date_birth"> 
    <span class="add-on"><i class="icon-th"></i></span> 
    </div> 
    </br> 
    <button type="submit" id="submit_btn" class="btn btn-primary btn-large">Submit</button> 
</fieldset> 
</form> 

сценарий:

//datepicker 
$(function(){ 
      window.prettyPrint && prettyPrint(); 

      $('#date_birth_picker').datepicker({ 
       autoclose: true, 
       weekStart: 1, 
      }); 

     }); 


//validation 
$().ready(function() { 
       jQuery.validator.addMethod("defaultInvalid", function(value, element){ 
        switch (element.value){ 
         case $(element).prop("defaultValue"): 
         if (element.name == "date_birth") return false; 
         break; 
         default: return true; 
         break; 
         } 
         }); 


       $("#gold_form").validate(
        { 
        rules:{date_birth: "required defaultInvalid", 
          name: "required", 
          family_name: "required" 
          }, 
    errorPlacement: function(error, element) { 
     $(element).filter(':not(.valid)').addClass("invalid"); 
    }, 
    success: function(error) { 
     $("#gold_form").find('.valid').removeClass("invalid").addClass("success"); 
    }, 
        }); 
       }); 

CSS :

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

.error { 
float: none; color: red !important; padding-left: .5em;  
vertical-align: top; 
} 
.invalid { 
border: 1px solid red !important; 
} 

.success{ 
border: 1px solid green !important; 
} 

Я что-то упустил или что? Вы можете свободно редактировать мой jsfiddle.

Спасибо за помощь

Answer 1

Вам необходимо повторно проверить достоверность даты когда DatePicker изменяет его, вручную.

Так после того, как ваш DatePicker создан, добавьте changeDate событие, которое запускает valid метод:

$('#date_birth_picker').datepicker({ 
       autoclose: true, 
       weekStart: 1, 
}).on('changeDate', function(ev) { 
    if($('#date_birth').valid()){ 
     $('#date_birth').removeClass('invalid').addClass('success'); 
    } 
}); 

http://jsfiddle.net/5xgfm/2/

Answer 2

Каким-то образом, после выбора даты, DatePicker() теряет фокус поля даты и ни один из плагинов проверки не может видеть поле ввода даты как заполненное (действительное). Как вывод, простой .focus() делает трюк.

$('#datefield').datepicker({ 
    //datepicker methods and settings here 
}).on('changeDate', function (e) { 
    $(this).focus();  
}); 

Я также отправил этот ответ на этот пост Bootstrap datepicker and bootstrap validator