Question

我正在尝试使用JavaScript验证我的html表单，因此它会遍历所有输入字段并检查空/空字段。

我找到了一种在w3s上验证null的方法（下面的代码），但我想修改函数，因此它使用我已分配给整个表单的特定id来检查表单上的所有字段而不是仅针对一个字段。

function validateForm() {
   var x = document.forms["myForm"]["fname"].value;
   if ( x == null || x == "" ) {
      alert("First name must be filled out");
      return false;
   }
}
</script>
</head>

<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
    First name: <input type="text" name="fname">
    <input type="submit" value="Submit">

Answer 1

除了这些我还会包含required属性，只是因为用户已禁用javascript。

<input type="text" id="textbox" required/>

它适用于所有现代浏览器，而不是较旧的浏览器，因为它是HTML 5的一部分

Answer 2

function validateForm(formId){
    var form=document.getElementById(formId);
    for(i=0; i<form.childNodes.length; i++)
        if(form.childNodes[i].tagName!='INPUT'||
           typeof form.childNodes[i].value=="undefined")
            continue;
        else{
            var x=form.childNodes[i].value;
            if(x==null||x==""){
                alert("First name must be filled out");
                return false;
            }
        }
}

不确定它是否有效。

Answer 3

自从您发布此问题已经有一段时间了，但由于您尚未接受答案，因此这是一个简单的解决方案：（jsfiddle）

function Validate()
{
    var msg= "",
        fields = document.getElementById("form_id").getElementsByTagName("input");

    for (var i=0; i<fields.length; i++){
        if (fields[i].value == "") 
            msg += fields[i].title + ' is required. \n';
    }

    if(msg) {
        alert(msg);
        return false;
    }
    else
        return true;
}

Answer 4

给表单一个“myForm”的id

然后您可以选择它： var form = document.getElementById（“myForm”）;

Answer 5

这是最简单的方法：

<script>
        function validateForm(formId)
        {
            var inputs, index;
            var form=document.getElementById(formId);
            inputs = form.getElementsByTagName('input');
            for (index = 0; index < inputs.length; ++index) {
                // deal with inputs[index] element.
                if (inputs[index].value==null || inputs[index].value=="")
                {
                    alert("Field is empty");
                    return false;
                }
            }
        }
</script>

替换＆lt; form＆gt;标记如下：

<form name="myForm" id="myForm" action="1.php" onsubmit="return validateForm('myForm');" method="post">

Answer 6

只需将Required放入输入标记然后每当您单击提交按钮时，空文本框将给出错误字段不能为空。例：- <input type="text" id="textbox" required/>

Answer 7

重要的是要管理一些事实，对于像textareas这样的某些表单元素，Firefox中的必需属性与所有其他浏览器的行为不同。在Firefox中，无论您的输入是NULL还是空，所需的属性都会阻止表单提交。但是在Chrome或Edge中，表单将在空字段上提交，而不是在NULL字段上提交

如何使用分配给表单的ID使用JavaScript验证空/空字段的html表单

7 个答案: