1

jQuery mobile dateboxを使用すると、jQueryの検証に問題が発生します。

検証を次のように設定しています。

onkeyup: false

代わりに、フォーカス/ブラー（タブ）イベントの検証がトリガーされると思います。

問題は、日付ボックスピッカーを使用して日付を設定すると、このイベントが発生しないように見えるため、日付が「必須」の日付ボックスがあり、それが入力されている場合でも、エラーメッセージが表示されることです...

編集：

これが私のフィドルです：

http://jsfiddle.net/3v2ZV/

HTML

<form id="my_form" method="post">
    <input name="name" id="full-name" data-theme="a" placeholder="Name" class="required">
    <input name="athlete_datebox" id="athlete_datebox" data-theme="a" placeholder="Date of Birth" class="required">
    <input type="submit" value="submit">
</form>

JS

$(document).ready(function () {
    $('#my_form').validate({
        onkeyup: true
    });
    $('#athlete_datebox').mobiscroll().date({
        theme: 'jqm',
        display: 'modal',
        mode: 'clickpick',
        dateOrder: 'mmD ddyy',
        dateFormat: 'yy-M-dd',
        endYear: 2034
    });
    $('#my_form').on('submit', function (event) {
        event.stopPropagation();
        event.preventDefault();
        if ($('#my_form').valid()) {
            alert('is valid');
        }
    });
})

何かを入力する前に「送信」をクリックすると、両方のフィールドが必須であることがわかります。ただし、mobiscroll日付ピッカーで日付を入力した後も、フィールドは空ではありませんが、必須としてリストされています。

4

1 に答える 1

4

「検証を次のように設定しています。

onkeyup: false

代わりに、フォーカス/ブラー（タブ）イベントの検証がトリガーされると思います。」

onkeyupイベントをオフにするだけです。イベントはまったく異なるオプションであり、onfocusoutオフにしない限り、デフォルトで「オン」になっています。

コードを提供していないため、これ以上詳細な解決策を提供することはできません。

ただし、説明する問題は、日付ピッカーに組み込まれているコールバック関数（どれですか？）を使用することで解決できる可能性があります。これらが利用可能な場合は、「変更時」または「選択時」のようなもの。

次に、コールバック関数内で、その1つの特定の要素のみの検証テストをプログラムでトリガーするjQueryValidateプラグインの.element()メソッドを呼び出す必要があります。

$('#myform').validate().element('#myelement');

コールバック関数がない場合は、要素のjQuerychangeイベントを利用するこのようなものを試すことができます。

$('#myelement').on('change', function() {
    $('#myform').validate().element('#myelement');
});

編集：

jsFiddleのコードについて。

1）内のオプションの後にセミコロンを配置しないでくださいvalidate。これはプラグインを壊します。

2）submitフォームが有効かどうかを確認するためにハンドラーを使用しないでください。組み込みのsubmitHandlerコールバックはすでにこれを行っています。

3）あなたの</form>タグはつづられました</for>

OPの編集のフィドル：http： //jsfiddle.net/3v2ZV/4/

于 2013-03-25T15:49:39.803 に答える