0

さまざまなフィールドの要件に応じて、JQuery がエラー メッセージを表示するフォームがあります。必要に応じて各フィールドの横にメッセージがポップアップするようにし、それぞれがフェードインし、3 秒のタイムアウトがあり、フェードアウトするようにします。

しかし、私は疑問に思っています:オブジェクトまたは配列にすべてのタイムアウトを格納する方法はありますか? 基本的に、すべてのエラーは現在、タイムアウトへの同じ参照から実行されています。したがって、1 つの入力でエラーが発生し、別の入力で 1 秒後にエラーが発生した場合、2 番目のメッセージは (3 秒ではなく) 2 秒で消えます。これは、すべてが 1 つのタイムアウト変数を参照しており、最初の発生で初期タイマーが設定されているためです。

これは注文フォーム用であるため、Product はDiv 'product'エラーがトリガーされた入力の親を参照します。

私はこのようなものを持っています:

function error_check_number(input)
{
    var intRegex = /^\d+$/;
    var product = jQuery(input).closest('div.product');
    if (!intRegex.test(input.val()) && input.val() != '')
    {
        input.val('0');
        if (jQuery('div.error-message', product).length <= 0)
        {
            var error = jQuery("<div class='error-message'>Number Values Only</div>").hide();
            error.appendTo(jQuery(product)).slideDown("fast");
        }

        var thetime = setTimeout(function(){
            jQuery("div.error-message", product).slideUp("fast", function () {
                jQuery("div.error-message").remove();
        });
        }, 3000);       
    }
    else
    {
        clearTimeout(thetime);
        jQuery("div.error-message", product).slideUp("fast", function () {
            jQuery("div.error-message", product).remove();
        });
    }
}

タイムアウトに関する限り、エラーメッセージへの各呼び出しが互いに独立して機能することを望みます。

4

3 に答える 3

0

これが私のもので、テストされていませんが、うまくいくと思います

function error_check_number(input) {
    var intRegex = /^\d+$/;
    var product = jQuery(input).closest('div.product');
    var error_div = product.find('div.error-message');

    function displayError(msg, field_name) {
       var error = $('<div class="error" id="error_for_'+field_name+'">'+msg+'</div>').hide();
       error.appendTo(error_div).slideDown("fast");

       error[0].timer = setTimeout(function(){
              error.slideUp("fast", function () {
                 error.remove();
              });
      }, 3000);       
    }

    if (!intRegex.test(input.val()) && input.val() != '') {
        input.val('0');
        displayError("Number Values Only");
    } else {
        err = error_div.find("#error_for_"+input.attr('name'));
        if (err[0]) {
           clearTimeout(err[0].timer)
           err.remove();
        }
    }
}

これは、div.error-message が常に存在することを前提としています。これは、すべてのエラー メッセージのコンテナーとして機能します。コンテナは削除されません。この動作が気に入らない場合は、単に「div.product」に追加できます

于 2012-07-05T20:23:02.217 に答える
0

doTimeout() でこれを試したところ、うまくいくようです。これを使用してはいけない理由はありますか?

benalman.com/projects/jquery-dotimeout-plugin

function error_check_number(input)
{
    var intRegex = /^\d+$/;
    var product = jQuery(input).closest('div.product');
    if (!intRegex.test(input.val()) && input.val() != '')
    {
        input.val('0');
        if (jQuery('div.error-message', product).length <= 0)
        {
            var error = jQuery("<div class='error-message'>Number Values Only</div>").hide();
            error.appendTo(jQuery(product)).slideDown("fast");
        }
        jQuery.doTimeout(jQuery(input).attr('name'), 3000, function(){
            jQuery("div.error-message", product).slideUp("fast", function () {
                jQuery("div.error-message", product).remove();
        });
        }, true);

    }
    else
    {
        jQuery.doTimeout(jQuery(input).attr('name'), function(){
            jQuery("div.error-message", product).slideUp("fast", function () {
                jQuery("div.error-message", product).remove();
        });
        }, false);
    }
}
于 2012-07-05T20:40:27.417 に答える
0

これを試して

if (!intRegex.test(input.val()) && input.val() != '')
{
    input.val('0');
    if (jQuery('div.error-message', product).length <= 0)
    {
        var error = jQuery("<div class='error-message'>Number Values Only</div>");
        error.appendTo(jQuery(product)).slideDown("fast", function(){
            var timeout=setTimeout(function(){ 
                error.slideUp("fast", function () {
                    error.remove();
                });
            }, 3000);
        });
    }
}

視覚的な例がなければ、これ以上先に進むことはできないと思います。

于 2012-07-05T20:11:19.493 に答える