0

我正在使用 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 及其消息

我知道我错过了什么

感谢并感谢

4

3 回答 3

1

  1. You misspelled the opening <style> tag. Therefore #ship-msg, #pay-msg won't be hidden:

    <sytle="text/css"> ... </style>

  2. Your script must be placed after jQuery has been loaded. That is at the end of your document. If you place it before the jQuery script is loaded, the browser won't recognize function calls like $(document).ready() and $("#cForm").validate().

于 2012-08-03T20:05:20.177 回答
0

I am assuming that the obvious mistakes (jQuery reference BEFORE the code and style tag mispelling) were simple oversights on your part and that you want to know how to make the appearing/disappearing happen. If you want to make the error appear and then go away after some time, when the validation fails call this function:

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

Which will turn the div on, wait 20 secs, and then turn it off. "messageDiv" is the div which you want to apply this to.

于 2012-08-03T20:08:47.217 回答
0

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

例子

于 2012-08-03T20:20:52.107 回答