javascript - 使用 PreventDefault 检查必填字段

Question

我遇到了一种情况，我有一个 HTML 表单，并且许多字段都需要它。问题是我必须使用 PreventDefault ，它会忽略“必需”输入并提交表单，即使没有必需的字段。因为这项工作并不完全取决于我，所以我必须使用 PreventDefault 并解决它。

我正在使用 jQuery，我正在尝试找到一种方法来定位所需的字段并防止表单在单击时提交。在用户提交之前，在表单上填写必填字段非常重要表单，因为我不希望在提交表单时丢失所需的信息。感谢帮助!

HTML

<form id="myForm">

    <input type="text" name="sentence1" id="st1" placeholder="Text here" required>

    <input type="text" name="sentence1" id="st2" placeholder="Text here" required>

    <input type="text" name="sentence1" id="st3" placeholder="Text here" required>

    <input type="text" name="sentence1" id="st4" placeholder="Text here" required>

    <input type="text" name="sentence1" id="st5" placeholder="This field is not required">

    <button type="submit" id="submit-form">Submit</button>

</form>

Answer 1

遇到了同样的问题，这是适合我的解决方案。

表单元素有一个名为 checkValidity 的函数和 reportValidity 。我们可以使用它们并覆盖提交按钮的点击事件。

$('#submit-form').click((event) => {
    let isFormValid = $('#myForm').checkValidity();
    if(!isFormValid) {
        $('#myForm').reportValidity();
    } else {
        event.preventDefault();
        ... do something ...  
    }
});