javascript - 如果未验证则停止提交表单

Question

我有一个带有权重的表格，我确保每个权重是:

1. 一个数字
2. 每个权重> 0
3. 所有权重的总和 = 100。

下面的例子只是测试 1 和 3:

function assertWeightValidity() {

           let weightSum = 0;

           $.each($('[name^=weight_]'), function()
           {
                    chai.assert(isNaN(this.value) === false, 'Weights should be numbers!');
                    let currWeight = Number(this.value);
                    console.log(currWeight);
                    weightSum += currWeight;
                    <!-- assert nothing is zero -->
           });
           console.log(weightSum);
 }

onEnterCalculate("#calculate", assertWeightValidity);

然后我将 onEnterCalculate 函数定义为:

function onEnterCalculate(selector, assertion) {

    middleware = assertion || null;

    document.onkeydown = function (evt) {
        var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
        if (keyCode == 13) {
            if(middleware) { middleware(); }
            $(selector).click();
        }
    }
}

我是 JavaScript 的新手。我用谷歌搜索但找不到解决方案。我想要实现的是，如果 chai 在任何时候抛出错误，我不想提交表单，我想提醒用户并让他们修改他们已经在表单中输入的内容。我发现可以通过 preventDefault() 调用实现类似的功能。不确定如何在 assertWeightValidity() 中获取事件(因为推测我需要在 chai 抛出错误时生成事件)。当前发生的情况是，如果权重不正确，例如“sadasda”，chai 会抛出未捕获的异常，但它会继续并发布表单。

谢谢

Answer 1

简而言之，您为您的表单 提供了一个提交 事件，您可以在该事件中运行验证。如果您在该函数中调用 e.preventDefault() 和/或 return false，它不会提交。否则，它会。

document.querySelector('form').addEventListener('submit', e => {
  console.log('preventing submit');
  e.preventDefault();
});

<form action="#">
  <button type="submit">Submit</button>
</form>

从那里开始，只需根据需要验证您的代码，然后根据需要调用(或不调用)preventDefault():

document.querySelector('form').addEventListener('submit', e => {  
  if (!document.querySelector('input').value) {
    console.log('Must add a value');
    e.preventDefault();
  }
});

<form action="#">
  <label>Value: <input /></label>
  <button type="submit">Submit</button>
</form>

如果你有多个验证函数都返回一个 bool 值(或者更好的是，一个错误消息)，一个简单的检查方法是将它们放在一个数组中，然后使用 every()或 filter() 看看它们是否都很好。

const checkField = id => !!document.querySelector(`#${id}`).value;

document.querySelector('form').addEventListener('submit', e => {
  if (![checkField('a'), checkField('b'), checkField('c')].every(Boolean)) {
    console.log('All fields must have a value');
    e.preventDefault();
  }
});

<form action="#">
  <label>Value: <input id="a"/></label>
  <label>Value: <input id="b"/></label>
  <label>Value: <input id="c"/></label>
  <button type="submit">Submit</button>
</form>

更好的是，如果它没有返回错误消息，那么您可以使用 filter() 收集错误消息:

const checkField = id => document.querySelector(`#${id}`).value ? undefined : `Field "${id}" must have a value`;

document.querySelector('form').addEventListener('submit', e => {
  const errors = [checkField('a'), checkField('b'), checkField('c')].filter(Boolean);
  
  if (errors.length) {
    console.log(errors);
    e.preventDefault();
  }
});

<form action="#">
  <label>Value: <input id="a"/></label>
  <label>Value: <input id="b"/></label>
  <label>Value: <input id="c"/></label>
  <button type="submit">Submit</button>
</form>

最后，既然你提到了抛出错误，如果你想让它真正抛出错误，你可以 try catch 它们然后输出它们。

const checkField = id => {
  if (!document.querySelector(`#${id}`).value) {
    throw new Error(`Field ${id} must have a value`);
  }
};

document.querySelector('form').addEventListener('submit', e => {
  try {
    checkField('a');
    checkField('b');
    checkField('c');
  } catch (ex) {
    console.log(ex.message);
    e.preventDefault();
  }
});

<form action="#">
  <label>Value: <input id="a"/></label>
  <label>Value: <input id="b"/></label>
  <label>Value: <input id="c"/></label>
  <button type="submit">Submit</button>
</form>

不过，这样做的缺点是您不能同时检查多项内容，因为它会在出现第一个错误时中止。