用于表单验证的 javascript 适用于 firefox 但不适用于 IE8

标签 javascript html css internet-explorer-8

我是 javascript 的新手，拿了一大块代码并修改了它以供我自己使用。它在 Firefox(*NIX 和 Windows)中运行良好。在 IE8 中，文本字段验证工作正常，但即使选择了一个选项，选择下拉菜单也会返回无效。 

<!DOCTYPE html>
<head>
<meta charset="utf-8 />
<link href="/FNMOC/CSS/styles.main.css" rel="stylesheet" type="text/css">
<title>Fleet Numerical Meteorology and Oceanography Center</title>
<link rel="icon" href="favicon.ico">

<script type="text/javascript">
var RequiredFieldIDs = 
'FirstName,LastName,Affiliation,Command,Email,Phone,METOC,Classification,Purpose,Priority,Due,NELat,SWLat,NELong,SWLong';

function CheckRequiredFields()

{
    RequiredFieldIDs = RequiredFieldIDs.replace(/[, ]+/,",");
    var idList = RequiredFieldIDs.split(",");
    var Empties = new Array();
    {
        var s = TrimFormFieldValues(document.getElementbyId(idList[i]).value);
        if (s.length<1) { Empties.push(idList[i]); }
    }
    if (! Empties.length) { return true; }
    var ess = new String ("\n\nThe Following are required:\n");
    for (var i=0; i<Empties.length; i++) { ess += '\n\t' + Empties[i]; }
    alert (ess);
    return false;
}

function TrimFormFieldValues(s)

{
    s = s.replace (/^\s*/,"");
    s = s.replace (/\s*$/,"");
}

</script>

<script type="text/javascript">

function ShowMenu()

{
    var form = document.climo;
    var field = form.Classification;
    var select = field.selectedIndex;

{
    if(select == 4) document.getElementById('tableHide').style.display = '';
    else document.getElementById('tableHide').style.display = 'none';
}
}

</script>

<script type="text/javascript">

function ShowMenu2()

{
    var form = document.climo;
    var field = form.Affiliation;
    var select = field.selectedIndex;

{
    if(select == 1)document.getElementById('tableHide2').style.display = "";
    else document.getElementById('tableHide2').style.display = 'none';
}
}

</script>

</head>
<body>

<div class="wrapper">
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="header">
<a href="/FNMOC/index.html">
<img class="floatright" src="/FNMOC/IMAGES/fnmoc.png" />
</a>
<br />
<h3>
We produce and deliver weather, ocean and climate information for Fleet Safety, Warfighting Effectiveness and National Defense.
<br />
<br />
Atmospheric and Oceanographic Prediction enabling Fleet Safety and Decision Superiority
</h3>
<br />
<br />
</div>
<div class="left_col">
<iframe src="/FNMOC/menu.html" width="100%" height="800" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="main_col">
<center>
<h2>FORM UNCLASSIFIED UNTIL FILLED OUT</h2>
<h2>Climatology Support Request</h2>
</center>
<form name=climo action="/CGI/mail-form-climo.cgi" method="post" onsubmit="return CheckRequiredFields();">
<table border="0" cellpadding="5" width="100%">
<tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
<center>
Contact Information
</h2>
</b>
<i>
* indicates required field
</i>
</center>
<hr>
</td>
</tr>
<tr>
<td width="30%">
<b>* First Name:</b>
</td>
<td width="70%">
<input type="text" id="FirstName" size="20" maxlength="250" name="1. First Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Last Name:</b>
</td>
<td width="70%">
<input type="text" id="LastName" size="30" maxlength="250" name="2. Last Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Affiliation:</b>
</td>
<td width="70%">
<select id="Affiliation" name="3. Affiliation:" onchange="!!(ShowMenu2());" size="1">
<option></option>
<option>MIL</option>
<option>CIV</option>
<option>CTR></option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70%">
<table style="display:none" id="tableHide2">
<tr>
<td>
Branch of Service:
<select name="4. Branch of Service:" size="1">
<option></option>
<option>USN</option>
<option>USAF</option>
<option>USA</option>
<option>USMC</option>
<option>USCG</option>
</select>
</td>
</tr>
<tr>
<td>
Rank:
<input type="text" id="Rank" size="10" maxlength="10" name="5. Rank:">
</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>
* Command/Organization:
</b>
</td>
<td width="70%">
<input="text" id="Command" size="30" maxlength="250" name="6. Command/Organization:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Email:</b>
</td>
<td width="70%">
<input type="text" id="Email" size="30" maxlength="250" name="7. Email:"
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Phone Number:</b>
</td>
<td width="70%">
<input type="text" id="Phone" size="30" maxlength="30" name="8. Phone number:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>DSN:</b>
</td>
<td width="70%">
<input type="text" size="13" maxlength="13" name="9. DSN:">
</input>
</td>
</tr>
<tr>
<td width="30%>
<b>* Are you meterologist or Oceanographer personnel?</b>
</td>
<td width="70%">
<select id="METOC" name="11. METOC:">
<option></option>
<option>YES</option>
<option>NO</option>
</select>
</td>
</tr>
<tr>
<tr width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Security Classification
</h2>
</b>
<center>
<i>
* indicates required field
</i>
</center>
<hr>
<i>
If classified, provide derivative and declassification info please.
</i>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Classification of this request:</b>
</td>
<td width="70%">
<select id="Classification" name="12. Classification:" onchange="!!(ShowMenu()); size="1">
<option></option>
<option>UNCLASSIFIED</option>
<option>CONFIDENTIAL</option>
<option>SECRET</option>
<option>TOP SECRET</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70">
<table style="display:none" id="tableHide">
<tr>
<td>
<input type=checkbox name="12a. Caveat:" value="SI">SI</input>
<input type=checkbox name="12b. Caveat:" value="TK">TK</input>
<input type=checkbox name="12c. Caveat:" value="NOFORN">NOFORN</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>Classified By:</b>
</td>
<td width="70%">
<input type="text" size="40" maxlength="250" name="13. Classified By:">
</input>
</td>
</tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Request Information
</h2>
</b>
<i>
* Indicates Required Field
</i>
<hr>
</td>
</tr>
<tr>
<td width="100%" colspan="2" align="center">
<b>
MISSION INFORMATION
</b>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Mission Support Catagory:</b>
</td>
<td width="70%">
<select id=Purpose name="17. Purpose:" size="1">
<option></option>
<option>Combat/Operation</option>
<option>Contingency</option>
<option>Exercise</option>
<option>Training</option>
<option>Experiment</option>
<option>Research</option>
</select>
&nbsp;
&nbsp;
<b>Mission Name:</b>
<input type="text" size="20" maxlength="250" name="18. Purpose name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Priority</b>
</td>
<td width="70%">
<select id="Priority" name="19. Priority:" size="1">
<option></option>
<option>LOW</option>
<option>MED</option>
<option>HIGH</option>
<option>URGENT</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
<b>* Due date:</b>
</td>
<td width="70%">
<input type="text" size="10" maxlength="10" id="Due" name="20. Date due:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Location</b>
<br />
provide NE/SW corner latitude and longitude in decimal format of each mesh you will use for applicataion/forcasting.
<br />
Northern hemisphere latitude is + and Southern hemisphere latitude is -, Eastern longitude from GMT is + and Western longitude from GMT is -.
</td>
<td width="70%">
<table>
<tr>
<td width="50%" aligh="right">
NE Latitude:&nbsp;&nbsp;<input type="text" id=NELat size="10" maxlength="250" name="22. NE Lat:">
</input>
<br />
SW Latitude:&nbsp;&nbsp;<input type="text" id=SWLat size="10" maxlength="250" name="23. SW Lat:">
</input>
</td>
<td width="50%" align="right">
NE Longitude:&nbsp;&nbsp<input type="text" id=NELong size="10" maxlength="250" name="24. NE Long:">
</input>
<br />
SW Longitude:&nbsp;&nbsp;<input type="text" id=SWLong size="10" maxlength="250" name="25. SW Long:">
</input>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
<center>
<input type="submit" name="Submit" value="Submit">
</input>
<input type="reset" name="Reset" value="Reset">
</input>
</center>
</form>
</div>
<br class="cleaner" />
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
</div>
</body>
</html>

其他选择字段具有相同的代码，只是名称/值不同。没有选择在 IE8 中有效。非常感谢您的帮助。

根据要求编辑添加所有代码

最佳答案

您验证选择框的方式不正确。您可以获得所选选项的值，如 select.value，它将在 Forefox 和 Chrome 中工作。然而，为了让 IE 也能理解它，正确的方法是使用所选选项的值:

var el = document.getElementbyId(idList[i]);
var s = TrimFormFieldValues(el.options[el.selectedIndex].value);

如果您的表单中有不同类型的控件，您可以使用此检查检查当前控件是否为选择框:

if (idList[i].tagName == 'SELECT') {
    // this is select, get the value using el.options[el.selectedIndex].value
}

关于用于表单验证的 javascript 适用于 firefox 但不适用于 IE8，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22256252/

上一篇：javascript - Accordion 子菜单不会向下滑动

下一篇：html - 如何使使用TCPDF生成的pdf表格居中？

相关文章：

javascript - 如何在 jquery 或 javascript 中使用选择器名称作为变量

php - 成功登录后标题未重定向

html - 输入行高使输入在 IE 上可滚动

html - 如何在bootstrap中并排创建2个div

javascript - 通过在按钮列中显示对话框来在 GridView 中编辑记录

javascript - 在 Angular 路由器的空路径上有条件地加载模块

javascript - Node 中的 req.body 是什么？

JavaScript 在外部点击时关闭

javascript - 为什么慢速 jQuery 动画断断续续？

html - 如何使表单输入字段变大？

©2024 IT工具网  联系我们