尝试创建一个简单的表单，如果未填写任何内容将显示错误答案

【问题标题】：Trying to create a simple form that will display an error if nothing is filled in尝试创建一个简单的表单，如果未填写任何内容将显示错误
【发布时间】：2015-03-22 02:06:54
【问题描述】：

我最近刚开始学习 javascript 并且正在学习一些课程，对于我的一个课程，我必须创建一个简单的表单。

如果在按下提交按钮时未填写表单，则应该有 javascript 会显示错误消息。

按下按钮时没有任何反应，我什至不确定该功能是否正在运行。

我没有放入任何“document.write”，我一步一步按照说明进行操作，但仍然无法使其正常工作。

如果能得到任何帮助，我将不胜感激，非常感谢。

<html>



<head>
<title>My Form</title>
</head>
<body>
<script type="text/javascript">


function register(){

	var x = new Array();
	x[0] = document.getElementById('name').value;
	x[1] = document.getElementById('lname').value;
	x[2] = document.getElementById('email').value;
	x[3] = document.getElementById('pw').value;
	x[4] = document.getElementById('pwc').value;
	
	var h = new Array();
	h[0] = <span style="color:'red'>Please type first name!</span>";
	h[1] = <span style="color:'red'>Please type last name!</span>";
	h[2] = <span style="color:'red'>Please type email!</span>";
	h[3] = <span style="color:'red'>Please type a password!</span>";
	h[4] = <span style="color:'red'>Please confirm password!</span>";
	
	var divs = new Array("mname", "mlname", "memail", "mpw", "mpwc");
	
			for(i in x){
			
			
				var error = h[i];
				var div = divs[i];
				
				
				if(x[i])==""){
				
				
					document.getElementById(div).innerHTML = error;
				
				}else{
				
					document.getElementById(div).innerHTML = "OK!";
	          			
				};
			
			
			};
		};

</script>



<form>

	<table border="1">
		<tr><td>First Name:</td><td><input type="text" name="name" id="name" /></td><td><div id ="mname"></div></td></tr>
		<tr><td>Last Name:</td><td><input type="text" name="lname" id="lname"/></td><td><div id ="mlname"></div></td></tr>
		<tr><td>Email:</td><td><input type="text" name="email" id="email"/></td><td><div id ="memail"></div></td></tr>
		<tr><td>Password:</td><td><input type="text" name="pw" id="pw"/></td><td><div id ="mpw"></div></td></tr>
		<tr><td>Confirm Password:</td><td><input type="text" name="pwc" id="pwc"/></td><td><div id ="mpwc"></div></td></tr>
	</table>
	<br />
<input type="button" name="submit" value="submit" onclick="register();" />

</form>




</body>


</html>

【问题讨论】：

标签： javascript html forms innerhtml

【解决方案1】：

你犯了一些错误，一个在 span 字符串中，另一个在 if 语句中。休息一切看起来都很好！

检查这个小提琴：

http://jsfiddle.net/zog1h7f6/

function register(){

var x = new Array();
x[0] = document.getElementById('name').value;
x[1] = document.getElementById('lname').value;
x[2] = document.getElementById('email').value;
x[3] = document.getElementById('pw').value;
x[4] = document.getElementById('pwc').value;

var h = new Array();
h[0] = "<span style=color:red>Please type first name!</span>";
h[1] = "<span style=color:red>Please type last name!</span>";
h[2] = "<span style=color:red>Please type email!</span>";
h[3] = "<span style=color:red>Please type a password!</span>";
h[4] = "<span style=color:red>Please confirm password!</span>";

var divs = new Array("mname", "mlname", "memail", "mpw", "mpwc");

        for(i in x){


            var error = h[i];
            var div = divs[i];


            if(x[i]===''){

                document.getElementById(div).innerHTML = error;

            }else{

                document.getElementById(div).innerHTML = "OK!";

            };


        };
    };

【讨论】：

太棒了！非常感谢……这种语法似乎让我很受用。感谢您的帮助

【解决方案2】：

我的建议是分小步进行；

检查是否首先调用register() 函数。
在register 函数中，首先尝试获取一个元素值，例如id="name"，通过执行document.getElementById('name') 并测试当您使用为名称字段指定的值提交时是否获得值。
尝试为 div 设置一些值。我建议在 chrome 检查器控制台或 Firefox 检查器控制台中进行测试。例如document.getElementById('mname').innerHtml = '<span>Testing this</span>'
一旦您习惯了使用各个部分，您应该能够将它们全部串在一起。

【讨论】：

感谢您的帮助。不过我确实有一个问题。是否有任何软件上的调试功能？因为我觉得这很有用，有点像 Visual Studio 对 C++ 所做的。我一直在使用notepad++、括号，有时还使用dreamweaver CS6 和CC。再次感谢您的帮助
Intellij webstorm、eclipse、net beans 都可以。但是您可以简单地使用 sublime text 或 notepad++ 并使用浏览器进行调试。了解一下 chrome 检查器

【解决方案3】：

试试这个脚本，我觉得它更干净一点

 <script type="text/javascript">


function register(){

    var name = document.getElementById('name').value,
        lName = document.getElementById('lname').value,
        email = document.getElementById('email').value,
        pw = document.getElementById('pw').value,
        pwc = document.getElementById('pwc').value;
          if(name !== '' && lName !== ''&& email !== '' && pw !== '' && pwc !== ''){
                 alert("succes");
            }else{
                  alert("sorry fill all inputs");
              }
        };

</script>

【讨论】：

绝对干净多了哈哈。我只是按照我的导师做的方式。感谢您的帮助！

【解决方案4】：

您在定义错误消息时遇到语法错误：

var h = new Array();
h[0] = <span style="color:'red'>Please type first name!</span>";
h[1] = <span style="color:'red'>Please type last name!</span>";
h[2] = <span style="color:'red'>Please type email!</span>";
h[3] = <span style="color:'red'>Please type a password!</span>";
h[4] = <span style="color:'red'>Please confirm password!</span>";

您应该在引号之间交替使用（即将整个字符串包装在 ' 中并在内部使用 "，反之亦然），或者像这样转义字符串中的双引号。

var h = new Array();
h[0] = "<span style=\"color:red\">Please type first name!</span>";
h[1] = "<span style=\"color:red\">Please type last name!</span>";
h[2] = "<span style=\"color:red\">Please type email!</span>";
h[3] = "<span style=\"color:red\">Please type a password!</span>";
h[4] = "<span style=\"color:red\">Please confirm password!</span>";

【讨论】：

我认为color: 'red'的'是不必要的。
投票...首先不是一个合适的解决方案。您还忘记在 if 语句中包含错误！