IE中的JavaScript表单验证

Question

大家好，我正在开发一个通讯录或电话簿应用程序。因此，目前我正在搜索记录。现在我有了这个表单，其中某些元素/字段是必需的或必填的，而其他元素/字段是可选的。

因此，我编写了一个非常简单的javascript函数来检查这些必填字段是否丢失。它在firefox和chrome上运行得很好，但在IE中就不行了。

在IE的js中，if子句似乎失败了，因为无论我是输入必填字段还是没有输入必填字段，我都会收到警告消息，告诉我输入必填字段。请注意，这不会只发生在firefox的IE中。所以我会在这里放一些相关的代码给你看看，希望你能在这里帮助我：

头

一些css代码

..。

<script type="text/javascript">

function disp_confirm()

{

  if (document.contractor_phonebook_form.Service.value == "" || document.....etc.)

  {

    javascript:alert('Please enter all necessary fields!');  

    return false;

  }

  else

  {

     return true;

  }


 }


 </script>

 end of head beginning of body


 <form action='<?php $PHP_SELF; ?>' method='post' name="contractor_phonebook_form" target="_self" onSbumit="return disp_confirm()">

一些表单元素是使用mysql和php从数据库查询中自动填充的。而其他的则是简单的下拉菜单。

  <select name="Service">
  ... etc.. 

希望你知道我这里有什么，为什么IE总是给我警告信息，请在我输入或不输入任何表单字段后填写必填字段。

再次提前感谢您..

Answer 1

好吧我找到了我问题的答案..。大多数浏览器会自动检测选项字段的值，这意味着我原来的值是这样的：

 <select name ="Service">

   <option>NOCC</option>
   <option>HVAC</option>
   ....etc.
 </select>

然而，IE总是得到空值，因为我没有显式地指定元素标签的value属性。所以我所做的就是把我的代码从上面的代码改成下面的代码：

  <select name="Service">
     <option value="NOCC">NOCC</option>
     <option value="HVAC">HVAC</option>
     ....etc..
  </select>

现在在IE中工作得很好。奇怪的是，大多数浏览器都能够通过查看选项标签显示来检测value属性，但是IE要求您专门定义value属性，否则会将其视为空白或null。这就是我的if子句在IE中失败的原因，因为我没有指定value属性，因此它总是空白的，即使我从下拉菜单中选择了一个值，它仍然认为它是空白的。

感谢你们所有人的帮助，我从你们的帖子中学到了一些新东西，如JQuery，我确实从中受益良多。

干杯

Answer 2

您应该像调用普通函数一样调用alert，而不必先编写javascript:。

但是，您的问题是IE以不同的方式实现select元素的value属性。

您需要检查是否有任何选项的selected属性为true。

使用jQuery最容易做到这一点，如下所示：

if ($('#service').val() === ""
 || $('#somethingElse').val() === "") {
    alert("Please enter all necessary fields.");
    return false;
} else
    return true;

Answer 3

有一个很好的jQuery cross browser solution，它提供对电子邮件地址、日期和其他常见功能的验证。您可以定义一个公共div，在其中可以显示您的错误。

我已经在Asp.net中使用过它，并且在适应我的需求方面遇到了一些问题。在这里有相当多的用户使用过这个解决方案。