0

user_name 入力フィールドが入力されているかどうかを送信時にチェックするフォームを作成しています。そうである場合は、jQuery UIダイアログ ボックスが表示されます。「はい」を押すと、回答が変数userOKWithItに送信され、 submit()関数の 2 回目の呼び出しで使用されます。

たとえば、ユーザーが Firebug コンソールを使用して空の user_name でフォームを送信できないようにするため、これを行っています ( ( 'form).submit()を書き込みます)。

これは正しい方法ですか？本質的な何かが欠けているような気がします。ユーザーの回答を格納するグローバル変数のアイデアは好きではありません。コードは次のとおりです。

var $dialog = $('<div></div>')
.html('<p>Are you sure you want to continue?</p>')
.dialog({
autoOpen: false,
resizable: false,
title: 'Continue anyway?',
buttons: {
    "Yes": function() {
        $( this ).dialog( "close" );
        userOkWithIt = true;
        $('form').submit();
    },
    No: function() {
        $( this ).dialog( "close" );
    }
}
});

var userOkWithIt = false;
$('form').submit(function(){    
if(!$('input[name="user_name"]').val()){
    //Don't submit because there is no user name written
    return false;
}else{
    $dialog.dialog('open');
    if(userOkWithIt){
        return true;
    }
}
});
4

1 に答える 1

0

正直なところ、あなたの目標について少し混乱しています。あなたが望んでいる以外の方法でフォームを送信しようとする、教育を受けた js プログラマーからどれだけ保護したいかを本当に決定する必要があります。

編集: また、HTML5 必須入力を調べる必要があります: http://www.w3schools.com/html5/att_input_required.asp

おそらく（私が考えることができる）最良のアイデアは、ユーザーが「はい」と言ったときに送信イベントのバインドを解除することです。そうすれば、フォームはグローバルブール値なしで送信されます。また、submit イベント ハンドラーを単純化して、ユーザーに確認を求めてから false を返すこともできます。

ここで、 userOkWithIt 変数をグローバル スコープから外したいだけの場合は、クロージャーを使用してそれを達成できます。

テストされていないコード例を次に示します。>>> <<< は、重要な変更を行った場所を示しています。

>>> var yesFunction; <<<

var $dialog = $('<div></div>')
    .html('<p>Are you sure you want to continue?</p>')
    .dialog({
        autoOpen: false,
        resizable: false,
        title: 'Continue anyway?',
        buttons: {
            "Yes": function() {
                $( this ).dialog( "close" );

                >>> yesFunction(); <<<

                $('form').submit();
            },
            No: function() {
                $( this ).dialog( "close" );
            }
        }
    });

>>> function() {                   <<<
>>> var userOkWithIt = false;      <<<

$('form').submit(function() {

    >>> yesFunction = function() { <<<
    >>>     userOkWithIt = true;   <<<
    >>> }                          <<<

    if(!$('input[name="user_name"]').val()) {
        //Don't submit because there is no user name written
        return false;
    } else {
        $dialog.dialog('open');
        if(userOkWithIt) {
            return true;
        }
    }
});

>>> }();                           <<<

それが役に立ったことを願っています。説明が必要な場合はお知らせください。数日以内に戻ってくるようにします。

于 2012-07-28T00:52:43.973 に答える