1

我的表单上有两个字段。一个是名称的简单输入，另一个由“vitalets bootstrap datepicker”驱动。我决定在它上面使用jquery验证插件，所以当第一个'name'留空时，它会变红，而对于第二个'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。

感谢帮助

4

2 回答 2

10

每当日期选择器更改日期时，您都需要手动重新检查日期的有效性。

因此，在创建日期选择器后，添加一个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/

于 2013-06-21T15:31:52.553 回答
3

不知何故，在选择日期后，datepicker() 失去了日期字段的焦点，并且没有一个验证器插件可以看到日期输入字段已填充（有效）。作为结论，一个简单的 .focus() 就可以了。

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

我还在这篇文章中发布了这个答案Bootstrap datepicker and bootstrap validator

于 2016-03-21T12:28:10.500 回答