jQuery與datepicker驗證，突出顯示的問題

我的表單上有兩個字段。一個是名字的簡單輸入，另一個是「vitalets bootstrap datepicker」。我決定使用jquery驗證插件，因此當第一個'名字'留空時會變紅，而第二個'date_birth'如果保持默認值，它也會變成紅色。所以你必須插入一個名字，你必須選擇一個日期而不是默認的日期。jQuery與datepicker驗證，突出顯示的問題

我已經添加了一個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。

感謝您的幫助

來源

2013-06-21 dzordz

你需要每當日期選擇器更改它，用手日期重新檢查的有效性。

所以在創建日期選擇器後，添加運行的valid方法changeDate事件：

$('#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/

來源

2013-06-21 15:31:52 Ryley

人認爲的偉大工程！謝謝 – dzordz

不知何故，選擇日期後，日期選擇器（）失去日期字段的重點，驗證器插件都不能將日期輸入字段視爲填充（有效）。作爲一個結論，一個簡單的.focus（）可以做到這一點。

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

我還張貼了這個答案，這個帖子Bootstrap datepicker and bootstrap validator

來源

2016-03-21 12:28:10

jQuery與datepicker驗證，突出顯示的問題

回答

相關問題