So I have a form that on clicking submit, I want to do some validation, before it submits. Pretty straight forward I think. So I setup a submit handler on the form and wanted it to do the AJAX check, and when it finishes, if its all good, go ahead and submit as usual.
所以我有一个表单,在点击提交时,我想在提交之前进行一些验证。我觉得很直接。所以我在表单上设置了一个提交处理程序,并希望它进行AJAX检查,当它完成时,如果一切正常,请继续像往常一样提交。
I tried this, and it failed for very obvious reasons:
我尝试了这个,它失败的原因非常明显:
$.when(checkUsername()).done(function (a) {
checkTitle();
checkMessage();
if (userValid && titleValid && messageValid) {
return true;
}
});
return false;
checkUsername is a $.post, while checkTitle and checkMessage are just checking if any characters are in those fields. Each of the functions relatively validates userValid, titleValid, and messageValid, setting those values true or false. The two input fields and text area field has a blur attached with each of the related functions, so even before the user clicks submit, the form is validating.
checkUsername是$ .post,而checkTitle和checkMessage只是检查这些字段中是否有任何字符。每个函数都相对验证userValid,titleValid和messageValid,将这些值设置为true或false。两个输入字段和文本区域字段都附有每个相关功能的模糊,因此即使在用户单击提交之前,表单也在验证。
So obviously, with the return false at the end, the form would never submit. BUT, I originally had the valid check outside the done (where the current return false is), and if the user entered 3 valid items, then erased a field and didn't leave it/blur, and directly clicked submit, it would still submit, because with the AJAX still processing, the fields hadn't undergone a second round of checking.
很明显,最后返回false,表单永远不会提交。但是,我最初在完成之外进行了有效检查(当前返回false是),如果用户输入了3个有效项目,则删除了一个字段并且没有离开它/模糊,并且直接点击提交,它仍然会提交,因为在AJAX仍然处理的情况下,这些字段没有进行第二轮检查。
Essentially, I want the form to wait on submission until the AJAX finishes. But the submit() function will process its return before the AJAX finishes, and I can't put it in a done, since I need the AJAX to trigger on on the submit. Essentially, a catch 22.
基本上,我希望表单等待提交,直到AJAX完成。但是submit()函数将在AJAX完成之前处理它的返回,并且我不能把它放在完成中,因为我需要AJAX来触发提交。基本上,捕获22。
I came up with something that I feel is a messy way of doing it, but the only method I can think of at the moment, and could use advice on if this is the only way to do it, or what other options I have. I am aware I could just submit the form via AJAX, but I'm hoping to see what options are available. This is the messy method:
我想出了一些我觉得这样做很乱的方法,但是我现在能想到的唯一方法,可以使用建议,如果这是唯一的方法,或者我有其他选择。我知道我可以通过AJAX提交表单,但我希望看到有哪些选项可用。这是一个凌乱的方法:
if (validated) return true;
else {
$form = $(this);
$.when(checkUsername()).done(function (a) {
checkTitle();
checkMessage();
if (userValid && titleValid && messageValid) {
validated = true;
$form.submit();
}
});
return false;
}
In this case, there is a master validate variable only set by the ajax, and the system resubmits when done.
在这种情况下,只有ajax设置了一个主验证变量,系统完成后重新提交。
2 个解决方案
#1
0
Your solution is the way to go. The .done method has a different context because of it's asynchronous execution, meaning that your validation method always will return false upon calling.
你的解决方案是要走的路。 .done方法具有不同的上下文,因为它是异步执行,这意味着您的验证方法在调用时总是返回false。
#2
0
Because your validation is async you need to do a little trick. you can use the .data() function to check if your form data was validated. if not do the validation. in the validation you can set the validated data to true and trigger the submit via jquery again.
因为您的验证是异步的,所以您需要做一个小技巧。您可以使用.data()函数来检查表单数据是否已经过验证。如果没有做验证。在验证中,您可以将验证数据设置为true,并再次通过jquery触发提交。
One additional note, i hope you still validate the data you receive by the form server side again, because javascript validation can be bypassed.
另外一个注意事项,我希望您仍然可以再次验证表单服务器端收到的数据,因为可以绕过javascript验证。
you need to replace the $(form) with your form element or the query to your form.
您需要将$(form)替换为表单元素或查询到表单。
$(form).submit(function(event) {
//check if already validated
if (!$(this.data("validated")) {
doValidation();
//prevent form form submitting because validation is in progress.
event.preventDefault();
}
});
function doValidation() {
//do you validation suff.
$.when(checkUsername()).done(function(a) {
checkTitle();
checkMessage();
if (userValid && titleValid && messageValid) {
//mark the form as validated
$(form).data("validated", true);
//trigger submit via jquery
$(form).submit();
}
});
}
Or you go the ajax way and post your form with $.post (only works if you have no file input element).
或者你使用ajax方式并使用$ .post发布表单(仅当你没有文件输入元素时才有效)。
$.post($(form).attr("action), $(form).serialize());
#1
0
Your solution is the way to go. The .done method has a different context because of it's asynchronous execution, meaning that your validation method always will return false upon calling.
你的解决方案是要走的路。 .done方法具有不同的上下文,因为它是异步执行,这意味着您的验证方法在调用时总是返回false。
#2
0
Because your validation is async you need to do a little trick. you can use the .data() function to check if your form data was validated. if not do the validation. in the validation you can set the validated data to true and trigger the submit via jquery again.
因为您的验证是异步的,所以您需要做一个小技巧。您可以使用.data()函数来检查表单数据是否已经过验证。如果没有做验证。在验证中,您可以将验证数据设置为true,并再次通过jquery触发提交。
One additional note, i hope you still validate the data you receive by the form server side again, because javascript validation can be bypassed.
另外一个注意事项,我希望您仍然可以再次验证表单服务器端收到的数据,因为可以绕过javascript验证。
you need to replace the $(form) with your form element or the query to your form.
您需要将$(form)替换为表单元素或查询到表单。
$(form).submit(function(event) {
//check if already validated
if (!$(this.data("validated")) {
doValidation();
//prevent form form submitting because validation is in progress.
event.preventDefault();
}
});
function doValidation() {
//do you validation suff.
$.when(checkUsername()).done(function(a) {
checkTitle();
checkMessage();
if (userValid && titleValid && messageValid) {
//mark the form as validated
$(form).data("validated", true);
//trigger submit via jquery
$(form).submit();
}
});
}
Or you go the ajax way and post your form with $.post (only works if you have no file input element).
或者你使用ajax方式并使用$ .post发布表单(仅当你没有文件输入元素时才有效)。
$.post($(form).attr("action), $(form).serialize());