包含提取的表单验证 api

Question

我有一个简单的表格，我想在提交和保存数据之前检查它是否包含有效数据。

但是，由于 fetch(...) 是异步的，我无法让验证停止并等待结果。

有没有办法阻止异步获取？
或者也许是更好的方法？

form.addEventListener('submit', (event) => {
    fetch(`/check?id=${id}`)
    .then((res) => res.json())
    .then((json) => {
        if (json.error) {
            // Prevent the submit here
            // event.preventDefault();
        }
    });
});

Answer 1

如果您想要 UI 友好的体验，您可以将 onfocusout() 或 onblur() 侦听器添加到表单中的每个字段，并在输入时验证每个输入。您可以默认禁用表单的提交按钮，只有在所有验证都通过后才启用它。像这样：

function validateId() {
 let id = document.forms.myForm.id.value;
 if(id === ""){
   document.forms.myForm.submit.disabled = true;
   return;
 }
 fetch(`https://api.github.com/users/${id}/repos`)
    .then((res) => res.json())
    .then((json) => {
        if (json.error) {
          // fail validation
          alert("Failed!");
          document.forms.myForm.submit.disabled = true;
        } else {
          // success
          document.forms.myForm.submit.disabled = false;
        }
    })
    .catch(error => {
         alert("Error! " + error);
         document.forms.myForm.submit.disabled = true;
    });
 
}

<form name="myForm" action="/action_page.php" method="post">
  ID: <input type="text" name="id" onfocusout="validateId()">
  <input type="submit" name="submit" value="Submit" disabled>
</form>

包含提取的表单验证 api

Form validation containing fetch api

javascript

fetch-api