jQuery Validation Plugin - 消息框显示

时间:2014-05-19 18:23:44

标签: jquery jquery-validate

我正在使用jQuery Validation Plugin在浏览器窗口的右上角成功显示消息。滚动页面时,该消息也会保留在视图中。我遇到的问题是当页面已经滚动到可以看到绝对右上角的位置时,在视图中显示初始消息。此时,只要页面滚动,消息就会显示在视图中,但我也希望消息在字段无效后立即显示在视图中。

<link rel="stylesheet" type="text/css" href="css/site.css" />
<script src="jquery/jquery.min-latest.js"></script>
<script src="jquery/jquery.validate.min.js"></script>
<script src="jquery/jquery.validate.dateUS.js"></script>
<script>
$(document).ready(function(){

    // attach Validate plugin to form
    $("#form").validate();

});

//scroll the message box to the top offset of browser's scroll bar
$(window).scroll(function(){
    $('.error').animate({
        top:$(window).scrollTop()+"px" },{queue: false, duration: 0
    });
});
</script>

这是 site.css

label.error {
    position: absolute;
    top: 0; right: 0;
    z-index: 10;
    text-align: center;
    font-weight: bold;
    font-size: small;
    width: 150px;
    border: 1px solid;
    margin: 0px;
    padding: 2px 2px 2px 2px;
    color: #D63301;
    background-color: #FFCCBA;
}

.error {
    background-color: #FFCCBA;
}

0 个答案:

没有答案