无法捕获错误：具有名称的无效窗体控件无法聚焦

Question

JS try catch 不处理表单提交错误"名称为 'somename' 的无效表单控件不可聚焦。我有一个选项卡式页面，共享一个提交。当页面加载时，当我从一个选项卡移动到另一个选项卡时，隐藏的必填字段会导致错误的验证。如果它触发了尝试/捕获，这将很容易解决，我可以查找消息并采取适当的行动。但是，错误会直接跳过捕获，无法处理。

var isValidForm = form.checkValidity();
if (!isValidForm) {
    debugger;
    let subbtn = document.getElementById('hiddenbtn');
    let test = null;
    try {
        test = subbtn.click();
    }
    catch (ex) {
        console.log(ex);
        //if "An invalid form...not focusable" don't 
        //return but continue. We're ok with this error.
    }
    test;
    return;
}

捕获

应捕获错误。但是，相反，它会跳过它。谁能告诉我如何在代码中检测此错误，而不会与添加和删除几个必需属性相关的大混乱？

Answer 1

我为它创建了一个快速测试用例：
(点击测试按钮，错误只出现在 chrome 的开发控制台中(

function test() {
  let el = document.querySelector('button[type="submit"]');
  el.click();
  console.log("Still running");
}

.hidden_input { display: none; }
button[type="submit"] { margin-bottom: 0.5rem; }

<form>
  <input type="text" name="hidden_input" class="hidden_input" value="" required />
  <button type="submit">SUBMIT</button>
</form>
<button type="button" onclick="test()">TEST</button>

此错误只发生在Chrome上，而不是在Firefox上(至少从我的测试来看(。

我猜 Chrome 不会将错误传播为 javascript 错误，而只是记录它。
(window.onerror和try {} catch {}都无法处理(

您的脚本也会在subbtn.click()后继续执行，因此:)

如果您仍然想摆脱错误，您可以禁用表单上的表单验证，或者直接提交表单而不是按提交按钮：

// Disable form validation:
form.noValidate = true;
// Or directly submit the form without using the button:
form.submit();

Answer 2

try块中有"test = subtn.click(("，但你在块外调用它。

尝试在 try 块中调用 click 函数，您将按预期捕获错误。

let test = subtn.click();
try {
    test;
} catch (ex) {
    console.log(ex);
    //if "An invalid form...not focusable" dont return but continue. we're ok with this error
}
return;