使用 preventDefault 检查必填字段答案

【问题标题】：Check Required Fields With preventDefault使用 preventDefault 检查必填字段
【发布时间】：2018-02-21 02:31:46
【问题描述】：

我遇到了一种情况，我有一个 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>

【问题讨论】：

你的问题有点不清楚。原生表单验证不适合您吗？
感谢您指出这一点，我重新措辞提供了更多详细信息。由于 preventDefault，本机表单验证不起作用。因此，如果未填写所需的输入，我需要创建一些阻止提交表单的内容。

标签： javascript jquery html forms preventdefault

【解决方案1】：

在您使用preventDefault() 的事件处理程序中，在表单元素上添加checkValidity() 方法：

document.getElementById('myForm').checkValidity();

这将“静态”检查您的表单是否存在所有 HTML5 约束违规（包括必需的），

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

只是您的问题的快速解决方案。我希望这是你需要的。检查以下：

$('#submit-form').click(function(){
     event.preventDefault();
     if(validateForm()){
      alert('sending');
     }

    });


    function validateForm() {
      var isValid = true;
      $('input[type=text]').each(function() {
        if ( $(this).val() === '' ) {
        alert('validation failed');
        isValid = false;
        } 
      });
      return isValid;
    }

或访问 JSFiddle：enter link description here

【讨论】：

您好，感谢您的代码。我改写了我的问题，因为有人指出它可能不清楚。我确实需要必填字段，因为在提交之前必须填写某些字段。我需要检查必填字段是否为空，并在填写这些必填字段之前阻止提交表单。
我已经更新了我的答案。希望这是您所需要的。

【解决方案4】：

您可以在表单提交方法中使用 preventDefault()。然后'必需'将起作用。

document.querySelector('form').addEventListener('submit', submitHandler);

function submitHandler(e){
e.preventDefault();
//your code here
}

【讨论】：