使用 PHP 和 Prototype 成功进行 AJAX 验证后无法获取要提交的表单

Question

我的网站上有由 PHP 处理的表单，包括验证。通常，如果出现错误，用户将返回到带有相应错误消息的表单。对于启用了 javascript 的用户，我尝试使用 Prototype 编写一个 javascript，它使用 AJAX 执行相同的 PHP 验证（以避免代码重复）并显示错误消息，而无需实际提交表单并等待其重新加载。

该脚本非常适合通过 AJAX 捕获错误并显示它们。但是，当没有错误时，我无法提交表单并前进到下一页。我一直在使用 Event.stopObserving，但它只是重新加载页面（这不是表单操作 url，表单提交到与表单本身不同的页面，因此不是服务器将浏览器发送回来）。我不太擅长 javascript 和 Prototype，所以我可能错过了一些明显的东西，但任何帮助将不胜感激。无论如何，这是我的代码：

document.observe("dom:loaded", function() {
    $$('form')[0].observe('submit', validate);

    function validate(event) {
        event.stop();
        // remove any existing error messages
        var curErrors = $$('ul.error');
        for( i=0, im=curErrors.length; i<im; i++ ) curErrors[i].remove();

        $$('form')[0].request({
            parameters: { 'js' : 1 },
            requestHeaders: {Accept: 'application/json'},
            onSuccess: function(req) { 
                var errors = req.responseText;
                if( errors == '[]' ) {
                    // no errors, submit form to server
                    $$('form')[0].stopObserving('submit', validate);
                    $$('form')[0].submit();
                } else {
                    // have errors, display error messages
                    var errors = errors.evalJSON(true);
                    for( var error in errors ) {
                        var errorMsg = '<ul class="error"><li>' + errors[error] + '</li></ul>';
                        var input = $$('[name="'+error+'"]')[0];
                        // display error message next to form field
                        . . .
                    }
                }
            },
            onFailure: function() {
                // can't validate here, let server do it
                $$('form')[0].stopObserving('submit', validate);
                $$('form')[0].submit();
            }
        });
    }
});

Answer 1

不要在验证方法中立即调用 event.stop() - 事件处理程序将在事件发生之前发生，这意味着验证方法将在表单运行之前运行。已提交。只需将该行移动到有关验证失败的 if 语句的分支内，它应该可以正常工作。
http://www.prototypejs.org/api/event/stop