使用preventDefault检查必填字段

Question

我遇到了一种情况，我有一个HTML表单，它在许多领域都需要。问题是我必须使用preventDefault忽略'required'输入并提交表单，即使没有必填字段。因为工作不完全取决于我，我必须使用preventDefault并解决它。

我正在使用jQuery，我正在尝试找到一种方法来定位所需的字段并阻止表单在click上提交。在用户可以将表单提交为表单之前填写表单上的必填字段非常重要。我不希望在提交时遗漏所需的信息。感谢帮助！

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

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

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

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

Answer 2

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

$('#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

Answer 3

您可以在表单提交方法中使用preventDefault（）。然后'required'将起作用。

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

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