0

jQuery Validate メソッドを使用して必須フィールドを正常に検証しています。すべて正常に動作しますが、基本的に自動非表示のように、表示してから10秒または20秒後にエラーを非表示にするオプションであるia divタグ内にエラーメッセージを表示したいと思います。

ここに私が作成したマークアップがあります

    <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. <style>オープニングタグのつづりを間違えました。したがって#ship-msg、#pay-msg非表示になりません：

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

  2. スクリプトは、 jQueryがロードされた後に配置する必要があります。それはあなたの文書の終わりにあります。$(document).ready()jQueryスクリプトがロードされる前に配置すると、ブラウザはやのような関数呼び出しを認識しません$("#cForm").validate()。

于 2012-08-03T20:05:20.177 に答える
0

明らかな間違い（コードとスタイルタグのスペルミスの前のjQuery参照）はあなたの側の単純な見落としであり、表示/非表示を発生させる方法を知りたいと思います。エラーを表示してしばらくしてから消える場合は、検証が失敗したときに次の関数を呼び出します。

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

これにより、divがオンになり、20秒待ってから、オフになります。「messageDiv」は、これを適用するdivです。

于 2012-08-03T20:08:47.217 に答える
0

これは厳密に検証を使用しているわけではありませんが、これは途中で役立つはずです

例

于 2012-08-03T20:20:52.107 に答える