2

HTML5 のサンプル アプリケーションを作成していますが、簡単なもので行き詰っています :-/ やりたいことは次のとおりです。

JQueryモーダルダイアログを開くリンクがあります。そのダイアログには、フォームがあります (2 つのフィールドがあります)。「Envoyer」ボタン (JQuery ボタンであり、送信ボタンではありません) をクリックすると、HTML5 ネイティブ検証をトリガーしたいと考えています。検証に問題がなければ、コードを実行してダイアログを閉じます。検証に失敗した場合は、ブラウザの「ヒント」を確認して、ユーザーに値を変更させたい..いつものように。

最初の問題は、JQuery の「Envoyer」ボタンが送信ボタンではなく、実際には HTML5 検証をトリガーしないことでした。

そのフォーラムで回避策を見つけました:クリックイベントをトリガーするだけです(動作しています)。これで、「Envoyer」ボタンをクリックすると、検証がトリガーされます。

2 番目の問題は、検証が OK の場合に 1 つのコードを実行し、検証が失敗した場合に別のコードを実行する方法です。フォーラムcheckValidity()で、フィールド (実際に機能している) またはフォームの有効性をテストできるメソッドを見つけましたが、フォーム オブジェクトで機能させることはできません。(エラー:Uncaught TypeError: Object #<HTMLDivElement>メソッド「checkValidity」がありません)

最初の質問: フォームで checkValidity() を呼び出せないのはなぜですか (私は Chrome 18 を使用しています)

2 番目の質問: 動作するものを作成しましたが、少しトリッキーなので、それを行うためのより良い方法があると確信しています。よりクリーンなコードを教えてください。

これが私がやったコードです:

        $("#dialog-form").dialog({
        height : '400',
        width : '400',
        modal : true,
        autoOpen : false,
        //position : 'top',
        overlay : {
            backgroundColor : '#000',
            opacity : 0.5
        },
        buttons : {
            'Envoyer' : function() {

                if ($('#dialog-form input[type=text]')[0].checkValidity()) {
                    // If validation is OK for that field, do the stuff and close the modal dialog
                    MyNotes.notesController.createPendingNote();
                    MyNotes.notesController.resetPendingNote();
                    $(this).dialog('close');
                }
                else {
                    // If validation failed, submit the form
                    // to trigger html5 validation
                    $('#dialog-form input[type=submit]').click();
                }
            },
            Cancel : function() {
                $(this).dialog('close');
            }
        }
    });
4

0 に答える 0