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(...) function returns a promise（我猜），以及 .then() 和 .catch() y handle 两个结果。但是，即使有错误的字段，也会提交表单。

我认为表单总是被提交的原因是因为我在某处有一些错误的代码，但我不知道在哪里。

谢谢！

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>

那怎么办呢？很简单，只需在 onsubmit 无条件地 中返回 false 来停止默认行为，并在承诺值得到解决时手动提交表单（如果有效）

<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>

JS AJAX: 承诺依赖提交总是提交

JS AJAX: promise dependant submit always submitted

javascript

ajax

onsubmit

promise