我可以让 IE7、HTML5 表单验证和 jQuery .submit 事件一起工作吗答案

【问题标题】：Can I make IE7, HTML5 Form Validation, and jQuery .submit event work together我可以让 IE7、HTML5 表单验证和 jQuery .submit 事件一起工作吗
【发布时间】：2012-10-07 02:46:51
【问题描述】：

这是我的表格：

<div id="MyModal" class="m-modal-container">
  <div class="form-wrap">
    <form id="form_reg" class="m-form reg-form" action="www.somedomain.com/subPage">
      <div class="form-element email">
    <input type="email" class="text" name="email" id="email" value="" placeholder="Email Address" title="Email is required." maxlength="90" required>
      </div>
      <div class="form-element buttons">
        <button type="submit" class="button primary submit">Register</button>
      </div>
    </form>
  </div>
</div>

这是来自我的 JS 文件来处理提交

$("#MyModal #form_reg").submit(function(event){
    var initial_id = 0;

    $.ajax({
        url: '/dir/file.cfc',
        async: false,
        data: {
            method: 'myFunction', 
            emailAddress: $("#MyModal #form_reg").find('[name="email"]').val(), 
            email_id: 0
        },
        cache: false,
        type: 'get',
        dataType: 'json'
    })
    .success(function(response) { initial_id = response.jsid; }) 
    .error(function(jqXHR, textStatus, errorThrown) { })
    .complete(function(response) { 
        if (initial_id == 0) {
            return true;
        } else {
            event.preventDefault();
            $('#MyModal').dialog('close');
            return false;               
        }
    });
});

我的问题：

此表单在主页上显示为模式。用户填写完毕，点击提交，进入新页面。它使用 HTML5 表单验证来指示必填字段。它使用 webShims/polyfill 来实现旧版浏览器的兼容性。

一切正常。我的问题出现在某些情况下，我不希望表单提交到“subPage”（表单上的默认操作）。相反，我希望它简单地关闭模态表单，停留在显示模态的页面上。（如果电子邮件已在系统中，则会发生这种情况 - 不希望将用户带到显示电子邮件已在系统中的消息的辅助表单页面）。

如果我使用 $("#MyModal #form_reg").click(function(event){ blah blah blah }); - 然后我可以控制提交与不提交。但是，我随后失去了 HTML5 表单验证功能。如果我使用 $("#MyModal #form_reg").submit(function(event){ blah blah blah });表单验证有效，但页面提交并且代码未捕获事件。

到目前为止，我所做的所有研究都表明 IE7 不能很好地处理 .submit 事件，但是，我需要 .submit 事件才能进行表单验证。

有没有办法让这三件事一起工作？ IE7 是导致我的问题的唯一浏览器。 .submit/form 验证在 FF、IE9、Opera 和 Chrome 中按预期工作。

任何建议将不胜感激。谢谢。

【问题讨论】：

标签： jquery forms html validation internet-explorer-7

【解决方案1】：

尝试使用.preventDefault() 停止默认提交操作

$("#MyModal #form_reg").submit(function(event){
    var initial_id = 0;

    event.preventDefault();

   // your code here

【讨论】：

好吧，我确实在正确的情况下使用 event.preventDefault() 。但这不是这里的问题。 .submit 事件甚至没有在 IE7 中注册（我尝试在 .submit 事件后的第一行添加一个警告语句，但它从不显示）。正如我上面提到的，到目前为止，我的研究表明 IE7 不支持 .submit 事件。但是 .click 事件取代了 HTML5 表单验证。所以，我试图弄清楚如何保持 HTML5 表单验证，但仍然能够适当地控制提交与不提交。

【解决方案2】：

客户端表单验证的大多数跨浏览器解决方案之一是动态禁用 HTML5 验证（例如，通过使用 JS 将 novalidate 属性添加到 FORM 元素）并为所有浏览器使用相同的自定义 JavaScript 验证代码路径。

所以 HTML5 验证在禁用 JS 时至少在现代浏览器中可以工作，而如果启用 JS，JavaScript 验证将在所有浏览器中工作。

【讨论】：

HTML5（样式）表单验证实际上在 IE7 中工作。使用 webshims/polyfiller 实现向后浏览器兼容性。我只提到表单验证是为了解释为什么我不能只使用 .click 事件——因为它取代了表单验证。如果我允许表单自然地“流动”，依靠它的动作标签（这在我 90% 的用例中是合适的）——表单验证工作得很好，并以与所有现代浏览器相同的方式呈现。
问题出现在 10% 的情况下，我需要更改表单提交的操作 - 要么关闭模态表单显示而不执行任何操作，要么执行不同的操作通常发生的那一种。同样，我可以使用 .click 事件，但这取代了表单验证 - 因为它只发生在 .submit 事件上。据我所知，IE7 不支持 .submit 事件。所以，我只是想弄清楚是否有人找到了让 IE7 与 .submit 事件一起工作的方法，或者想出一个等效的解决方案。

【解决方案3】：

那么提交事件应该在 IE7 中工作。它应该由 jQuery 规范化。所以这很奇怪。我会说：尝试删除 webshims（仅用于测试）并查看是否调用了您的提交处理程序，如果它有效，则可能是 webshims 错误（请报告此。然后）。如果还是不行，应该是 jQuery 的 bug。

要解决您的问题，您可以执行以下操作：

删除验证 $("#MyModal #form_reg").prop('noValidate', true);
挂钩提交或按钮点击
并使用 checkValidity + 显示验证消息检查处理程序内部的有效性

【讨论】：