0

我正在使用 jQuery 验证器来处理初始验证，如果通过，我希望在处理远程调用时在 div 标记中显示“正在验证...”。div 标签的 id 和 name 都是“验证”。

在启动远程测试之前，我需要在哪里显示此代码？我希望用户明白这可能需要几秒钟，他们需要等待片刻。

$(document).ready(function(){
$.validator.addMethod("noSpecialChars", function(value, element) {
    return this.optional(element) || /^[a-zA-Z0-9-_.]+$/i.test(value);
}, "Ignored");

$('[name=po_number]').focus();

jQuery.validator.messages.required = "";
$("#verifying").text("Msg #1"); // On entry
$("#form1").validate({
    invalidHandler: function(e, validator) {
        $("#verifying").text("Verifying...");
        var errors = validator.numberOfInvalids();

        if (errors) {
            var message = errors == 1
                ? 'PO must contain only letters, numbers, dashed, underscores or periods and must be between 2 and 15 characters long.'
                : 'You missed ' + errors + ' fields.  They have been highlighted below';
            $("div.productError span").html(message);
            $("div.productError").show();
        } else {
            $("div.productError").hide();
        }
    },

    onkeyup: false,
    submitHandler: function(form) {
        $("div.productError").hide();
        // start nested, remote validate
        var HTMLtable = '';
        var po_number = $('[name=po_number]').val().toUpperCase();  // Force PO to uppercase
        $('[name=po_number]').val(po_number);                               // Load upper PO back to web page

        $.ajax({ type: "GET",
            url: "remote_dup_po_check.asp?company="+company+"&customer="+customer+"&po_number="+po_number,
            async: false,
            success : function(results) {
                if (results != 0) {
                    // The remote call to Avante will generate the entire HTML
                    // table that is returned OR 0 if there are no duplicates
                    HTMLtable = results;
                }
            }
        });
        if (HTMLtable != "") {
            var msg = 'PO <b>' + po_number + '</b> has already been used by your account on the following transactiosn:<br>'
            msg = msg + HTMLtable;
            msg = msg + '<br>';
            msg = msg + 'Do you still wish to use this PO?';

            // We need to set the options to correctly drive the prompting
            var options;
            options = { };
            options['pid'] = '0';   // Needed by the returnTrue which is STORED in payment.asp but
            options['sid'] = '0';   // which is CALLED from jquery.modaldialog.js (damn confusing!)
            options['title'] = 'Duplicate PO!';
            options['width'] = '600';
            $.modaldialog.prompt(msg, options);

            // Turn off the faded background and restore to normal.
            // Appears to be needed due to the sub-level of calling?
            $('#dialog-mask').fadeOut("fast");
            verifyMsg = "Msg2";
        } else {
            alert("Unique PO\n\nSubmit disabled for debugging");
            form.submit();      // PO is unique
        }
        // end nested, remote validate
    },

    rules: {
        po_number: {
            required: true,
            noSpecialChars: true,
            rangelength:[2,15]
        }
    },

    messages: {
        po_number: {
            required: 'Please enter a PO #.',
            noSpecialChars: 'The PO must be made of letters digits, underscores, dashes and/or periods (no spaces).',
            rangelength: 'The PO must be between 2 and 15 characters.'
        }
    },
    debug:true  // this lets it hit Firebug
});

});

谢谢

4

2 回答 2

2

我错过了什么吗？

在你打电话之前把它放好$.ajax(....

于 2012-08-20T20:29:58.623 回答
1

如果我正确理解您的问题，您需要在进行 ajax 调用时显示“正在验证...”。并且只有在本地验证通过后才会进行 ajax 调用。

这将要求您在 jquery 表单验证完成后使用“正在验证...”文本更新 div 。这意味着您可能希望在 submitHandler 中执行此操作，而不是在 invalidHandler 中显示消息。

所以你的 submitHandler 可能看起来像：

$("div.productError").hide();
var po_number = $('[name=po_number]').val().toUpperCase();  // Force PO to uppercase
$('[name=po_number]').val(po_number);

$("#verifying").text("Verifying...");

$.ajax({ type: "GET",
        url: "remote_dup_po_check.asp?company="+company+"&customer="+customer+"&po_number="+po_number,
        async: false,
        success : function(results) {
            if (results != 0) {
                // The remote call to Avante will generate the entire HTML
                // table that is returned OR 0 if there are no duplicates
                var HTMLtable = results;
                if (HTMLtable != "") {
                    var msg = .......
                    //Do something with result
                }

            }
        }
});

此外，您可能只使用 asynch 调用而不是使其成为可能会停止其余脚本执行的同步调用。

更新：显示同步调用的动画

如果你使用 jQuery animate，代码会一直执行到动画完成，所以这里有一个适合我的解决方法：

$("#verifying").text("Verifying...");

$('#verifying').animate({
    opacity: 1
  }, 500, function() {
        //animation complete, call ajax here
        $.ajax({ 
            type: "GET",
            url: "remote_dup_po_check.asp?company="+company+"&customer="+customer+"&po_number="+po_number,
            async: false,
            success : function(results) {
            if (results != 0) {
                // The remote call to Avante will generate the entire HTML
                // table that is returned OR 0 if there are no duplicates
                var HTMLtable = results;
                if (HTMLtable != "") {
                    var msg = .......
                    //Do something with result
                }

                }
            }
        });
  });
于 2012-08-20T20:50:39.440 回答