JS AJAX:承诺依赖提交始终提交

Question

最后，我设法做到了这一点：

function validar(dato_a_validar, url, secc)
{
var datastr = "secc=" + secc + "&dato=" + dato_a_validar;
return new Promise(function(resolve, reject) {
$.ajax({
type:'GET',
url:url,
data:datastr,
success:function(response) { resolve(response); },
error:function(response) { reject(response); }
});
});
}
async function check_submit()
{
init(); // sets some global variables
errores_personal_cnt = 0; // error counter
var dni_ctl = document.getElementById("frm_funcionario_dni");
var dni = dni_ctl.value;
dni_ctl.style.borderColor = "black";
dni_ctl.style.backgroundColor = "none";
const estado = await validar(dni, url_validacion, "dni")
.then(salida => estadoValidacion(dni_ctl, salida)) // estadoValidacion() sets some colour and form control title
.catch(error => estadoValidacion(dni_ctl, "error"));
$.when(estado).done(console.log("Errores: " + errores_personal_cnt));
return false; // this is set for tests purposes, but is always ignored.
}

在onsubmit事件中，调用async function check_submit()。validar(...)函数返回一个promise(我猜(，并使用.then()和.catch()y处理这两个结果。但是，即使有错误的字段，也会提交表单。

我认为总是提交表单的原因是因为我在某处有一些错误的代码，但我无法弄清楚在哪里。

谢谢！

Answer 1

用一个例子解释，假设我有一个使用基于承诺的方法验证的表单。假设validar()是一个执行一些验证并需要 3 秒的函数(我有很多你知道的字段！但是当这样使用时，它会失败！请参阅下面的评论，了解为什么会这样。

<form action="google.com" id="frm">
<input id="txt">
<button type="submit">submit</button>
</form>
<script>
document.getElementById('frm').onsubmit = () => {
var check = check_submit();
console.log(check); //Promise {<pending>}
console.log(check ? true : false) // which is evaluates to true! (check ? true : false) <-- true
//So browser proceeds with form's default behavior which is to submit on google.com
}
function validar() {
return new Promise(function(resolve, reject) {
setTimeout(() => resolve(false), 3000)
});
}
async function check_submit() {
var result = validar(); // <-- this line NEVER WAITS for the promise of validar to get resolve() 'ed 
// instead its current value which is Promise {<pending>}  is used immediatly and RETURNED!
return result;
}
</script>

那么如何让它工作呢？ 很简单，只需通过无条件返回onsubmitfalse 来停止默认行为，并在解决承诺值时手动提交表单(如果有效(

<form action="google.com" id="frm">
<input id="txt">
<button type="submit">submit</button>
</form>
<script>
document.getElementById('frm').onsubmit = () => {
check_submit(); //<-- will handle our form submission business
return false; //unconditional
}
function validar() {
return new Promise(function(resolve, reject) {
setTimeout(() => resolve(false), 3000)
});
}
async function check_submit() {
var result = await validar(); //<-- this line NOW WAITS (due to await) for the promise of validar to get resolve() 'ed
if (result) {
alert('submitting form as validar returned true')
document.getElementById('frm').submit(); // submit manully as promise'd value returned true
} else
alert('meh')
}
</script>