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

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

使用PHP和Prototype成功进行AJAX验证后，无法提交表单

1 个答案: