I have forms on a site that are processed by PHP, including validation. Normally, if there's errors, the user is returned to the form with the appropriate error messages. For users with javascript enabled, I'm trying to write a javascript with Prototype that uses AJAX to do the same PHP validation (to avoid code duplication) and display the error messages without having to actually submit the form and wait for it to reload.
我在网站上有PHP处理的表单，包括验证。通常，如果出现错误，则会向用户返回包含相应错误消息的表单。对于启用了javascript的用户，我正在尝试编写一个带有Prototype的javascript，它使用AJAX进行相同的PHP验证（以避免代码重复）并显示错误消息，而无需实际提交表单并等待它重新加载。
The script works very well at grabbing the errors via AJAX and displaying them. But, when there are no errors, I cannot get the form to submit and move forward to the next page. I've been working with Event.stopObserving, but it just reloads the page (which is not the form action url, the form submits to a different page than the form itself, so it's not the server sending the browser back). I'm not that good with javascript and Prototype, so I'm probably missing something obvious, but any help would be greatly appreciated. Anyway, here is my code:
该脚本非常适合通过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();
}
});
}
});
1 个解决方案
#1
0
Don't call event.stop() immediately within your validate method - the event handler will occur before the event does, meaning that the validate method will run before the form is submitted. Simply move that line within the branch of the if statement regarding validation failure, and it ought to work just fine. http://www.prototypejs.org/api/event/stop
不要在validate方法中立即调用event.stop（） - 事件处理程序将在事件发生之前发生，这意味着validate方法将在提交表单之前运行。只需在if语句的分支内移动该行就验证失败，它应该可以正常工作。 http://www.prototypejs.org/api/event/stop
#1
0
Don't call event.stop() immediately within your validate method - the event handler will occur before the event does, meaning that the validate method will run before the form is submitted. Simply move that line within the branch of the if statement regarding validation failure, and it ought to work just fine. http://www.prototypejs.org/api/event/stop
不要在validate方法中立即调用event.stop（） - 事件处理程序将在事件发生之前发生，这意味着validate方法将在提交表单之前运行。只需在if语句的分支内移动该行就验证失败，它应该可以正常工作。 http://www.prototypejs.org/api/event/stop