javascript验证带有两个或更多下拉列表的表单

时间:2015-05-06 09:59:55

标签: javascript html forms validation

我正在设计一个包含两个下拉列表和一些文本输入的html表单。我打算使用javascript进行验证,但我无法验证下拉列表。

我已经尝试并测试了JSFiddle,但无法弄清楚如何将其用于两个或更多下拉列表。我的代码看起来像这样



<script>


	function ValidateForm(){
			var names = document.forms["myForm"]["names"].value;
			var month = document.forms["myForm"]["month"].value;
			var year = document.forms["myForm"]["year"].value;
			

				if (names == null || names ==""){
					lert ("name cannot be empty");
					return false;
					}

				
				if(month == null || month ==""){
					alert ("month must be selected");
					return false;
					}
				
				if(year == null || year ==""){
					alert ("year must be selected");
					return false;
					}




}
			
</script>
&#13;
<html>

<body>
<form enctype="multipart/form-data" name = "myForm" action = "" onsubmit="return ValidateForm()" method = "post">
	

	Name: <input name ="names" type = "text" size = "55" maxlength = "100"><br>
	Month: <select id ="selectmonth" name="month">
		<option value="">-select month-</option>
		<option value="January">January</option>
		<option value="February">February</option>
  		<option value="March">March</option><p>
		<option value="April">April</option><p>
		<option value="May">May</option><p>
		<option value="June">June</option><p>
		<option value="July">July</option><p>
		<option value="August">August</option><p>
		<option value="September">September</option><p>
		<option value="October">October</option><p>
		<option value="November">November</option><p>
		<option value="December">December</option><p>
	</select><p>

Year:	<select name ="year">
		<option value = ""> -select year-</option>
		<option value = "2015"> 2015 </option>
		<option value = "2016"> 2016 </option>
		<option value = "2017"> 2017 </option>
	</select><p>
<input name = "add_person" type="submit" value = "submit">
</form>

<body>
</html>
&#13;
&#13;
&#13;

如何让表单在点击提交按钮

时验证所有内容

1 个答案:

答案 0 :(得分:1)

注意到之后... public class MyTest { Map<String,Integer> mapTable; public MyTest(List<String> wordList){ //initialize map makeMap(wordList); } public void makeMap(List<String> wordList){ mapTable = new HashMap(); for(int i = 0; i < wordList.size(); i++){ //fill the map up mapTable.put(wordList.get(i), 0); } } //update occurences in a map public void updateMap(String [] _words){ for(int i = 0; i < _words.length; i++){ updateWordCount(_words[i]); } } public void updateWordCount(String _word){ int value = 0; //check if a word present if(mapTable.containsKey(_word)){ value = mapTable.get(_word); value++; mapTable.put(_word, value); } } public void DisplayCounts(){ for( String key : mapTable.keySet()){ System.out.println("Word : "+key+"\t Occurrence(s) :"+mapTable.get(key)); } } public void getWordCount(){ String filePath = "C:\\Users\\Jyo\\Desktop\\help.txt"; String line = ""; try { // FileReader reads text files in the default encoding. FileReader fileReader = new FileReader(filePath); // Always wrap FileReader in BufferedReader. BufferedReader bufferedReader = new BufferedReader(fileReader); String _words[] = null; while((line = bufferedReader.readLine()) != null) { System.out.println(line); _words = line.split(" "); updateMap(_words); } // Always close files. bufferedReader.close(); } catch (Exception e) { System.out.println("Error :"+e.getMessage()); } } /** * @param args the command line arguments */ public static void main(String[] args) { // TODO code application logic here List<String> wordList = new ArrayList<>(); wordList.add("data"); wordList.add("select"); MyTest mt = new MyTest(wordList); mt.getWordCount(); mt.DisplayCounts(); } } 中缺少a

像这样:

alert
 function ValidateForm(){
    	var names = document.forms["myForm"]["names"].value;
    	var month = document.forms["myForm"]["month"].value;
    	var year = document.forms["myForm"]["year"].value;
    		if (names == null || names ==""){
    			alert ("name cannot be empty"); //<-- here was lert()
    			return false;
    		}
    		if(month == null || month ==""){
    			alert ("month must be selected");
    			return false;
    		}
            if(year == null || year ==""){
    			alert ("year must be selected");
    			return false;
    		}
    }

更换警报后..它有效..

编辑1:

关于您在评论中建议的JSFiddle。

我简化了它,让它像你想要的那样工作。

<form enctype="multipart/form-data" name = "myForm" action = "" onsubmit="return ValidateForm()" method = "post">
	

	Name: <input name ="names" type = "text" size = "55" maxlength = "100"><br>
	Month: <select id ="selectmonth" name="month">
		<option value="">-select month-</option>
		<option value="January">January</option>
		<option value="February">February</option>
  		<option value="March">March</option><p>
		<option value="April">April</option><p>
		<option value="May">May</option><p>
		<option value="June">June</option><p>
		<option value="July">July</option><p>
		<option value="August">August</option><p>
		<option value="September">September</option><p>
		<option value="October">October</option><p>
		<option value="November">November</option><p>
		<option value="December">December</option><p>
	</select><p>

Year:	<select name ="year">
		<option value = ""> -select year-</option>
		<option value = "2015"> 2015 </option>
		<option value = "2016"> 2016 </option>
		<option value = "2017"> 2017 </option>
	</select><p>
<input name = "add_person" type="submit" value = "submit">
</form>
function fun()
{
 var mainCard = document.getElementById("cardtype");
 var mainCardValue = mainCard.value;
 var otherCard = document.getElementById("othercard");
 var otherCardValue = otherCard.value;
 if (mainCardValue == "selectcard") {
    alert("Please select a card type");
 } else if (otherCardValue == 'selectcard') { 
    alert("Please select a secondary card type");
 }
}