Question

这是我的表格：

<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来实现较旧的浏览器兼容性。

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

如果我使用$（“＃MyModal #form_reg”）。点击（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中使用。

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

Answer 1

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

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

    event.preventDefault();

   // your code here

Answer 2

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

因此，当禁用JS时，HTML5验证在现代浏览器中至少，而如果启用了JS，则JavaScript验证将适用于所有浏览器。

Answer 3

提交事件应该在IE7中有效。它应该由jQuery规范化。所以这很奇怪。我会说：尝试删除webshims（仅用于测试），看看你的提交处理程序是否有效，如果它有效，它可能是一个webshims错误（请报告此。然后）。如果它仍然不起作用，它应该是一个jQuery错误。

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

删除验证$（“＃MyModal #form_reg”）。prop（'noValidate'，true）;
挂钩提交或按钮点击
并使用checkValidity + show validation messages检查处理程序内部的有效性

我可以将IE7，HTML5表单验证和jQuery .submit事件一起使用

3 个答案: