5

我正在尝试使用 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">
4

7 回答 7

20

除了这些，我还会包含该required属性，以防万一用户禁用了 javascript。

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

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

于 2013-10-15T13:09:17.970 回答
2

自从您发布此问题以来已经有一段时间了，但是由于您还没有接受答案，所以这里有一个简单的解决方案：（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;
}
于 2013-12-31T07:00:20.040 回答
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;
            }
        }
}

不确定它是否有效。

于 2013-10-14T02:16:03.170 回答
1

给表单一个“myForm”的ID

然后你可以选择它： var form = document.getElementById("myForm");

于 2013-10-14T02:17:08.967 回答
0

这是最简单的方法：

<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>

将 < form> 标记替换为以下内容：

<form name="myForm" id="myForm" action="1.php" onsubmit="return validateForm('myForm');" method="post">
于 2013-10-14T06:06:14.070 回答
0

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

于 2017-03-07T15:18:04.460 回答
0

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

于 2017-07-22T16:40:29.427 回答