Question

需要做的事：

1）如果用户忘记/遗漏一个或多个字段，则单击“提交”按钮时应显示错误 2）在提交按钮下方显示输入/选择结果。

我做了什么：

1）在名字和姓氏字段中，我使用了html5标签＆＃34;必需＆＃34;显示错误。
2）我为下一个4字段添加了javascript代码。实际上，它可以工作，但它只适用于第一个无线电领域。但是，如果我删除该特定的无线电字段代码，那么它将工作下一个字段选择选项代码...类似地发生在接下来的两个字段。不要理解为什么不同时显示所有错误？
3）为了显示结果，我编写了名字，姓氏和性别，但它不起作用。而且我不了解如何为选定的选项值进行编码，并选中复选框以显示结果。

任何帮助？

＆＃13;

function showInput() {

// No:1 For radio button code
	var elem = document.forms["formSurvey"].elements['sex'];
	len = elem.length-1;
	chkvalue = "";
	for(i=0; i<=len; i++) {
		if(elem[i].checked)chkvalue = elem[i].value;
	}
		if(chkvalue=="") {
			document.getElementById("errorg1").innerHTML = "NO button Checked";
			return false;
		} else {
			var gendershow = document.getElementById("gendershow1").value;
			document.getElementById("gendershow1").innerHTML = gendershow;
			return true;
		}

// No:2 For select option button code
		
	if(document.getElementById("choose").value=="") {
		document.getElementById("errorChoose").innerHTML = "Please select session!";
		return false;
	} else { 
		var sessionShow1 = document.getElementById("selectSession").value;
		document.getElementById("selectSession").innerHTML = sessionShow1;
		return true;
	} 
	
// No:3 For Check button code
	var allchecked = 0;
	if(document.getElementById("int").checked)allchecked = 1;
	if(document.getElementById("sch").checked)allchecked = 1;
	if(document.getElementById("cur").checked)allchecked = 1;
	if(allchecked == 0) {

		document.getElementById("errorg2").innerHTML = "Please check the value";
		return false;
	} else {
		var checkIt = document.getElementById("checkButton").value; 
		document.getElementById("checkButton").innerHTML = checkIt;
		return true;
	}	
  
// No:4 Show the input/selected result  
	
	var first_name = document.getElementById("fname").value;
			document.getElementById("display_fname").innerHTML = first_name;
			
			var last_name = document.getElementById("lname").value;
			document.getElementById("display_lname").innerHTML = last_name;
			var tellGender = document.getElementByName("sex").value;	
			document.getElementById("gendershow1").innerHTML = tellGender;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>CSE </title>
	
</head>
<body>
	
	

	<div class="content">
		
		
		<!-- Enter information about CSE Center -->
<p>
		<form name="formSurvey" onsubmit="return showInput()" action="index.html" method="post">
				
	<p>First name: <input type="text" name="fname" id="fname" required> </p>
    <p>Last name: <input type="text" name="lname" id="lname" required></p>
  <br>
  
  
 <h4> Gender:</h4>
 

  <p><input type="radio" name="sex" value="Male" id="gender1"> Male</p>
  <p><input type="radio" name="sex" value="Female" id="gender2" > Female</p>
  <p><input type="radio" name="sex" value="Prefer" id="gender3" > Prefer not to include</p>
  <p><span style="color:red;" id="errorg1"></span></p>
  <br>

  
 <h4> Which semester do you plan on attending?</h4>
  
  <select id="choose"> 
  
  <option value="">Choose a session</option>
  <option value="summer">Summer 2015</option>
  <option value="fall">Fall 2015</option>
  <option value="spring">Spring 2016</option>
  
  </select>
  <p><span style="color:red;" id="errorChoose"></span></p>
  <br>
  
  
  <h4>How did you hear about PSU?</h4>
   <p><span style="color:red;" id="errorg2"></span></p>
   
   <p><input type="checkbox" name="pt" value="Internet" id="int"> Internet Site</p>
  <p><input type="checkbox" name="pt" value="School Fair" id="sch" > While attending school fair.</p> 
  <p><input type="checkbox" name="pt" value="Current Student" id="cur"> Current Student of PSU</p><br>  
  
  
  <input type="submit" value="Submit">
	<br>
		
	
	</form>

	<p><span id="display_fname"></span></p>
	<p><span id="display_lname"></span></p>
	
	<p><span id="gendershow1"></span></p>
	<p><span id="selectSession"></span></p>	
	<p><span id="checkButton"></span></p> 
	


</p>
			
			

	</div>
	
	
	<script src="script.js"></script>
</body>
</html>

＆＃13;

Answer 1

从快速的观察中看，它似乎没有同时显示所有错误的原因是由于两个原因：

您使用的if/elseif/else语句只允许一个为真。
每次发现错误都会回来。这将不允许其他语句在您返回之前运行。

因此，将第一个内容更改为多个if语句，然后在发现错误后立即返回，这很可能会解决您的问题。

Javascript表单验证并在提交按钮

1 个答案: