Question

我已经搜索了这个问题的答案，但无法在任何地方找到它。

我的表单中包含HTML＆＃39; required＆＃39;属性，它可以很好地突出显示在提交之前需要填写的字段...或者可以做，但是我的表单用螺栓固定到的系统（我无法控制）仍然会在几个之后提交表单秒。它依赖于Javascript的提交。因此，我想编写一个Javascript脚本来检查所有字段的必需属性。目前我有一个脚本，它指定了我想要强制的字段，但是如果它可以查找属性，那就太棒了。

Answer 1

如果使用输入[type = submit] ，则不需要任何JavaScript

<form id="theForm" method="post" acion="">
  <input type="firstname" value="" required />
  <input type="lastname" value="" required />
  <input type="submit" name="submit" value="Submit" />  
</form>

工作jsBin

但如果输入[type = button] 用于提交表单，请使用下面的代码段

<form id="theForm" method="post" acion="">
  <input type="firstname" value="" required />
  <input type="lastname" value="" required />
  <input type="button" name="button" value="Submit" />  
</form>

window.onload = function () {
  var form = document.getElementById('theForm');
  form.button.onclick = function (){
    for(var i=0; i < form.elements.length; i++){
      if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){
        alert('There are some required fields!');
        return false;
      }
    }
    form.submit();
  }; 
};

Wotking jsBin

Answer 2

这将验证所有表单字段类型

$('#submitbutton').click(function (e) {
    e.preventDefault();

    var form = document.getElementById("myForm");
    var inputs = form.getElementsByTagName("input"), input = null, select = null, not_pass = false;
    var selects = form.getElementsByTagName("select");
    for(var i = 0, len = inputs.length; i < len; i++) {
        input = inputs[i];

        if(input.type == "hidden") {

            continue;
        }

        if(input.type == "radio" && !input.checked) {
            not_pass = true;
        } 
        if(input.type == "radio" && input.checked){
            not_pass = false;
            break;
        }

        if(input.type == "text" && !input.value) {
            not_pass = true;
        } 
        if(input.type == "text" && input.value){
            not_pass = false;
            break;
        }

        if(input.type == "number" && !input.value) {
            not_pass = true;
        } 
        if(input.type == "number" && input.value){
            not_pass = false;
            break;
        }

        if(input.type == "email" && !input.value) {
            not_pass = true;
        } 
        if(input.type == "email" && input.value){
            not_pass = false;
            break;
        }

        if(input.type == "checkbox" && !input.checked) {
            not_pass = true;
        } 
        if(input.type == "checkbox" && input.checked) {
            not_pass = false;
            break;
        }
    }

    for(var i = 0, len = selects.length; i < len; i++) {
        select = selects[i];
        if(!select.value) {
            not_pass = true;
            break;
        } 
    }

    if (not_pass) {
        $("#req-message").show();//this div # in your form
        return false;
    } else {
     //do something here 
    }
});

Answer 3

您可以使用大多数浏览器都支持的 Constraint validation API。

Answer 4

多年后，这是一个使用更现代 Javascript 的解决方案：

for (const el of document.getElementById('form').querySelectorAll("[required]")) {
  if (!el.reportValidity()) {
    return;
  }
}

有关约束验证 API 的链接，请参阅 Vlad 的评论（感谢 Vlad，这有帮助！）

使用Required属性对所有字段进行Javascript验证

4 个答案: