html 表单验证 |所需的属性不再起作用 - 除了 type="email" - 有什么问题？答案

【问题标题】：html form validation | attribute required does not work anymore - except for type="email" - Whats wrong?html 表单验证 |所需的属性不再起作用 - 除了 type="email" - 有什么问题？
【发布时间】：2013-11-04 10:37:07
【问题描述】：

我正在寻找我的代码几个小时，并尝试了我在互联网上找到的每一个提示。

我有一个表格 - 你几乎所有的字段都是必需的。

但我的浏览器 (Chrome) 真正检查的唯一字段是电子邮件字段。

我的浏览器以某种方式忽略了其他输入的“必需”。

代码：

   <label class="radio"> <input type="radio" name="Assessment Type" id="optionsRadios1"     value="Daten-Qualität" checked="checked" /> Quick Assessment "Daten-Qualität" für 378€</label> 
   <label class="radio"> <input type="radio" name="Assessment Type" id="optionsRadios2" value="Einsparpotenziale" />Quick Assessment "Einkaufserfolg & Einsparpotenziale" 750€</label>
<br>
    <table>
       <tr>
           <td><input class="span3" type="text" name="Name" value="Ihr Name" onfocus="if(this.value == 'Ihr Name') {this.value='';}" onblur="if(this.value == '') {this.value='Ihr Name';}" placeholder="Ihr Name" required/></td>

           <td><input class="span3" type="text" name="Firma" value="Ihre Firma" onfocus="if(this.value == 'Ihre Firma') {this.value='';}" onblur="if(this.value == '') {this.value='Ihre Firma';}" placeholder="Ihre Firma" required/></td>
       </tr>
       <tr>    
           <td>
              <input type="text" class="span3" name="Telefonnummer" value="Ihre Telefonnummer"  onfocus="if(this.value == 'Ihre Telefonnummer') {this.value='';}" onblur="if(this.value == '') {this.value='Ihre Telefonnummer';}" placeholder="Ihre Telefonnummer"/> 

              <input type="email" class="span3" name="E-Mail-Adresse" value="Ihre E-Mail-Adresse" onfocus="if(this.value == 'Ihre E-Mail-Adresse') {this.value='';}" onblur="if(this.value == '') {this.value='Ihre E-Mail-Adresse';}" placeholder="Ihre E-Mail-Adresse" required/>
            </td>
            <td>
               <input type="text" class="span3" name="Position" value="Ihre Position" onfocus="if(this.value == 'Ihre Position') {this.value='';}" onblur="if(this.value == '') {this.value='Ihre Position';}" placeholder="Ihre Position" required/> 

               <input type="text" class="span3" name="Abteilung" value="Ihre Abteilung" onfocus="if(this.value == 'Ihre Abteilung') {this.value='';}" onblur="if(this.value == '') {this.value='Ihre Abteilung';}" placeholder="Ihre Abteilung" required/></td>
       </tr>
     </table>
 <input type="submit" class="btn btn-large btn-warning" value="Bestellung abschicken" />

这里有什么问题？

感谢您的想法 - 萨宾

【问题讨论】：

我不确定问题是什么？你问如何使必填字段？您是在问如何验证字段吗？
使它们成为必需的，同时将标签保留在所有浏览器的字段中。抱歉，我的问题不够清楚 - 我明白了

标签： javascript html forms validation

【解决方案1】：

默认情况下，您在所有字段中都有文本，因此它们是有效的，email 不同的原因是因为您在该字段中的文本不是有效的电子邮件。

【讨论】：

嗯，我也想过这个，但是错误信息告诉我“请填写”，而不是“无效的电子邮件地址”，所以我不确定这里发生了什么。

【解决方案2】：

看起来你正在为每个字段设置一个值，如果它是空白的，在你的onblur()。使用占位符，我认为您的 onfocus() 和 onblur() 处理程序是多余的，并且会导致问题。

【讨论】：

不幸的是，“占位符”不适用于许多 IE 用户。但你是对的......似乎“模糊”正在造成这个麻烦......
有没有办法将标签放在所有浏览器的输入字段中并要求某些字段？
我认为有一些 jquery 插件可以帮助您做到这一点。由于它是 jquery，它可以在 vanilla javascript 中完成。我认为一种方法是进行一些手动验证，并确保输入的值不等于您的“占位符”值。实际上，在您的情况下，由于占位符没有提供无法通过标签 IMO 获得的信息，因此它们不是必需的。据我了解，占位符用于附加信息，即电话号码格式。
谢谢！是的，我认为这将是一个很好的解决方案！

【解决方案3】：

尝试仅使用 placeholder 属性而不是 blur 和 focus Javascript 来设置默认值。这些默认值被浏览器的表单验证视为有效。

【讨论】：

单独占位符对许多用户不起作用...这就是我们添加 onfocus/onblur 的原因...有没有其他方法可以将标签放在所有浏览器的输入字段中？
Facebook 过去常常在使用占位符之前将文本输入与文本“密码”交换为正确的密码字段。你可能会做类似的事情。否则，您将重新像过去一样手动验证表单。
我不明白你的意思，你有示例链接吗？
我没有链接，因为 Facebook 改变了他们的做法。基本上，当页面加载时，他们拥有的“密码”字段有一个带有value="Password" 的文本字段，该字段有一个焦点事件处理程序，可以隐藏它并显示一个真正的密码字段并将焦点放在该字段中。