2

这是我的表格：

<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 中按预期工作。

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

4

3 回答 3

0

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

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

    event.preventDefault();

   // your code here
于 2012-10-16T22:15:12.553 回答
0

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

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

于 2012-10-16T22:35:33.147 回答
0

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

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

  • 删除验证 $("#MyModal #form_reg").prop('noValidate', true);
  • 挂钩提交或按钮单击
  • 并使用 checkValidity + 显示验证消息检查处理程序内部的有效性
于 2012-10-23T20:16:06.443 回答