Html 使用 Javascript 检查表单中的所有元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17933509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check all elements in form with Javascript
提问by Falcon
I know javascript in the beginning level, but I have a problem.
我在初级阶段就知道 javascript，但我有一个问题。
I have 7input elements in a form and I want all of them to be filled. I came up with this idea but it looks disgusting.
我在一个表单中有7 个输入元素，我希望所有这些元素都被填充。我想出了这个主意，但它看起来很恶心。
Can someone help me how to check whether all form elements are filled or not?
有人可以帮助我如何检查所有表单元素是否已填写？
function validateForm()
{
var x=document.forms["register"]["name"].value;
var y=document.forms["register"]["phone"].value;
var z=document.forms["register"]["compname"].value;
var q=document.forms["register"]["mail"].value;
var w=document.forms["register"]["compphone"].value;
var e=document.forms["register"]["adres"].value;
var r=document.forms["register"]["zip"].value;
if (x==null || x=="" || y==null || y=="" || z==null
|| z=="" || q==null || q=="" || w==null || w=="" || e==null || e==""
|| r==null || r=="")
{
alert("Please fill all the inputs");
return false;
}
}
</script>
回答by Jeremy J Starcher
This is the simple and dirty way.
这是简单而肮脏的方式。
A better way is to update a validation message that the fields are required.
更好的方法是更新字段为必填字段的验证消息。
function validateForm()
{
var fields = ["name, phone", "compname", "mail", "compphone", "adres", "zip"]
var i, l = fields.length;
var fieldname;
for (i = 0; i < l; i++) {
fieldname = fields[i];
if (document.forms["register"][fieldname].value === "") {
alert(fieldname + " can not be empty");
return false;
}
}
return true;
}
回答by faino
With some simple vanilla JS, you can handle this in a lot more simplified way:
使用一些简单的 vanilla JS，您可以以更简单的方式处理此问题：
JavaScript
JavaScript
function validateForm(){
var form = document.getElementById("register"), inputs = form.getElementsByTagName("input"), input = null, flag = true;
for(var i = 0, len = inputs.length; i < len; i++) {
input = inputs[i];
if(!input.value) {
flag = false;
input.focus();
alert("Please fill all the inputs");
break;
}
}
return(flag);
}
Then make sure you returnthe function within your form, either inline (bad practice):
然后确保您return的表单中的函数，或者内联（不好的做法）：
<form name="register" id="register" method="post" action="path/to/handler.php" onsubmit="return validateForm();">
Or in a more unobtrusive way:
或者以更不引人注目的方式：
window.onload = function(){
var form = document.getElementById("register");
form.onsubmit = function(){
var inputs = form.getElementsByTagName("input"), input = null, flag = true;
for(var i = 0, len = inputs.length; i < len; i++) {
input = inputs[i];
if(!input.value) {
flag = false;
input.focus();
alert("Please fill all the inputs");
break;
}
}
return(flag);
};
};
回答by sathya raj
<html>
<head>
<title> Event Program</title>
<script>
function validateForm() {
var fields = ["name, phone", "compname", "mail", "compphone", "adres", "zip"]
var i, l = fields.length;
var fieldname;
for(i = 0; i < l; i++) {
fieldname = fields[i];
if(document.forms["register"][fieldname].value === "") {
alert(fieldname + " can not be empty");
return false;
}
}
return true;
}
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
var fields = {
"eventName": "Event Name",
"eventDate": "Event Date",
"eventPlace": "Event Place"
}
function Validate(oForm) {
var arrInputs = oForm.getElementsByTagName("input");
for(var i = 0; i < arrInputs.length; i++) {
var oInput = arrInputs[i];
if(oInput.type == "text" && oInput.value == "") {
alert(fields[oInput.name] + " cannot be empty");
return false;
}
if(oInput.type == "file") {
var sFileName = oInput.value;
if(sFileName.length > 0) {
var blnValid = false;
for(var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
alert(sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase())
if(sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if(!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
return false;
}
}
}
}
return true;
}
</script>
</head>
<body>
<div align="center">
<h3>Event Management</h3>
<form onsubmit="return Validate(this);" id='eventForm' name='eventForm' method='POST' enctype='multipart/form-data' action='saveEvent.php'>
<table>
<tr>
<td>Event Name</td>
<td>
<input type="text" name="eventName">
</td>
</tr>
<tr>
<td>Event Date</td>
<td>
<input type="text" name="eventDate" id='datepicker'>
</td>
</tr>
<tr>
<td>Event place</td>
<td>
<input type="text" name="eventPlace">
</td>
</tr>
<tr>
<td>Upload Image</td>
<td>
<input type="file" name="my file" />
<br />
</td>
</tr>
<tr>
<td>About Events</td>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="Submit" />
<input type="button" name="clear" value="Clear" />
</td>
</tr>
</table>
</form>
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true
}).datepicker("setDate", new Date());
});
</script>
</body>
</html>
回答by Time
You could just do this:
你可以这样做：
//Declare variables
var 1, 2, 3, 4, 5, 6, 7;
1 = document.getElementById("Field Id");
2 = document.getElementById("Field Id");
3 = document.getElementById("Field Id");
4 = document.getElementById("Field Id"); //Define variable values
5 = document.getElementById("Field Id");
6 = document.getElementById("Field Id");
7 = document.getElementById("Field Id");
//Check if any of the fields are empty
If (1 == "" || 2 == "" || 3 == "" || 4 == "" || 5 == "" || 6 == "" || 7 == "") {
alert("One or more fields are empty!");
//Other code
}
I used this for my own form and it works fine while not taking up to much space or looking too "ugly". It works for all field elements and checks the value entered.
我将它用于我自己的表单，它运行良好，同时不占用太多空间或看起来太“难看”。它适用于所有字段元素并检查输入的值。
