gpt4 book ai didi

使用日期选择器进行 jquery 验证,突出显示问题

转载 作者:行者123 更新时间:2023-12-01 06:13:55 24 4
gpt4 key购买 nike

我的表单上有两个字段。一个是简单的名称输入,另一个由“vitalets bootstrap datepicker”驱动。我决定在其上使用 jquery 验证插件,因此当第一个“名称”留空时,它会变成红色,而对于第二个“日期出生”,如果它保持默认值,它也会变成红色。所以你必须插入一个名字,并且你必须选择一些默认日期之外的日期。

我添加了一个 errorPlacement 和 success 规则,这些规则按照我的描述进行。但问题出在我的“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。

感谢帮助

最佳答案

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

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

关于使用日期选择器进行 jquery 验证,突出显示问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17231302/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com