Question

我使用jQuery Validate方法成功验证了必填字段。一切正常，但我想在ia div标签内显示错误信息，这个错误信息会在显示10或20秒后消失，基本上就像自动隐藏。

这是我创建的标记

    <script type="text/javascript">
$(document).ready(function(){
    $("#cForm").validate({
    rules: {
        PaymentMethod: {
            required: true
        }
        ,ShippingMethod: {
            required: true
        }
    },

    messages: {

        PaymentMethod: {
            required:" Select a payment method!"
        }
        ,ShippingMethod: " Select a shipping method!."
    }   

    });

});
</script>

<sytle="text/css">
 #ship-msg, #pay-msg {display:none; background:url("/image/req.gi") no-repeat left center transparent;}
 .msg { color:#000;}

</style>


<form id="cForm" method="post" action="/pay.html">
<div class="ship-options">
<label for="ShippingMethod">Shipping Method</label>
<select id="ShippingMethod" name="ShippingMethod" >
  <option value="">Choose Shipping Method</option>
  <option value"UPS-GROUND">UPS GROUND</option>
  <option value"UPS-1DAY">UPS 1DAY</option>
  <option value"UPS-2DAY">UPS 2DAY</option>
    </select>
    <div id="ship-msg><div class="msg"> // display the error messgae here </div>
</div>

<div class="pay-options">
<label for="PaymentMethod">Payment Method</label>    
<select id="PaymentMethod" name="PaymentMethod" >
  <option value="">Choose Paymenet Method</option>
  <option value"VISA">VISA</option>
  <option value"MASTERCARD">MASTERCARD</option>
  <option value"AMEX">AMERICAN EXPRESS</option>
</select>
 <div id="pay-msg><div class="msg"> // display the error messgae here </div>
</div>
<input type="submit" value="Continue" id=" />

</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>

所以当有人点击“继续”按钮并且未选择方法时，显示它们会显示相应的div及其消息

我知道我错过了什么

谢谢并感谢

Answer 1

您拼错了开头的<style>标记。因此，#ship-msg，#pay-msg不会被隐藏：

<sytle="text/css"> ... </style>
在加载jQuery之后，您的脚本必须放置。那是在你的文件的最后。如果在加载jQuery脚本之前放置它，浏览器将无法识别$(document).ready()和$("#cForm").validate()等函数调用。

Answer 2

我假设明显的错误（在代码和样式标签拼写错误之前的jQuery引用）是您的简单疏忽，并且您想知道如何使出现/消失发生。如果要显示错误，然后在一段时间后消失，则在验证失败时调用此函数：

function ToggleErrorMessage(messageDiv) {
    messageDiv.toggle().delay(20000).toggle();
}

将打开div，等待20秒，然后将其关闭。 “messageDiv”是您要将其应用于的div。

Answer 3

这不是严格使用您的验证，但这应该会帮助您

example

如何在div标签内显示jquery验证消息

3 个答案: