3

クレジットカードの有効期限の検証を実装しています。これにより、月と年が別々のドロップダウンに表示されます。レイアウトの小さな問題を除いて、ほぼそこにあります。

フィドル

HTMLは次のようになります。

<form id="myform">
<table>
<tr>
    <th colspan="2"><label class="secure-section-title" for="ccexp">Expiration date</label></th>
</tr>
<tr>
    <td><select id="ccexp" name="cc_exp_month" class="required creditcardexpiry">
        <option value="01">01</option> ... <option value="12">12</option>
      </select> / <select name="cc_exp_year" class="required creditcardexpiry">
        <option value="2012">12</option> ... <option value="2021">21</option>
    </select></td>
    <td></td>
</tr>
</table>
</form>​

検証を実行するJavaScriptは次のとおりです。

$('#myform').validate({
    errorPlacement: function(error, element) {
        element
            .closest('tr') // take closest parent
            .prev('tr')
            .find('> th')
            .append(error)
        },
        groups: {
            creditcardexpiry: 'cc_exp_month cc_exp_year'
        }
    });

$.validator
    .addMethod('creditcardexpiry', function(value, element) {
        var form = element.form,
        expiry = form['cc_exp_year'].value + form['cc_exp_month'].value,
        date = new Date(),
        month = date.getMonth() + 1,
        now = '' + date.getFullYear() + (month < 10 ? '0' + month : month);

        return expiry > now;
    });

基本的に、有効期限が1か月先の場合にのみ検証されます（将来の最大10年は、ドロップダウンによって制限されます）。

問題のシナリオは次のとおりです。

  1. 過去の日付を入力します。エラーメッセージが表示され、ドロップダウンが赤になります

  2. 年を2014年に増やして、エラーを修正します。エラーメッセージが消える

問題は、もう一度クリックするまで、月のドロップダウンがまだ赤であるということです。フィールドはグループ化されているため、無効なエントリが解決されると、両方のドロップダウンがクリアされることを期待していました。

私はここで明らかな何かを見落としていますか、それともこれはバグですか？

アップデート

groups両方のフィールドのエラーによって2つのメッセージが発生しないようにするだけなので、プロパティに関するバグではありません。

4

2 に答える 2

3

どうやら、ドロップダウンはクリックイベントをトリガーすることで再検証されます（デフォルト）。したがって、私の解決策は、選択した値が変更されたときに、2 つのドロップダウンの間でクリックをトリガーすることです。

var $expiryFields = form.find('.creditcardexpiry');

$expiryFields.on('change', function() {
    // trigger click on the other field to force revalidation
    $expiryFields.not(this).trigger('click');
});

私はこの修正にあまり満足していないので、他の誰かがより良いものを考え出すことを願っています.

デモ

于 2012-12-05T04:43:34.580 に答える
0

jQuery.validator.element個々の要素を検証するために使用できます。実装は少し冗長ですが、要点は次のとおりです。

var $expiryFields = $form.find('.creditcardexpiry'),
    $validator = $form.validate();

$expiryFields.change(function() {
    $expiryFields.not(this).each(function () {$validator.element(this)});
});
于 2014-03-23T21:11:15.193 に答える