Question

在HTML5中，我an orphaned form control提交了表单。为了支持IE10，我使用以下内容：

jQuery(document).delegate('input[form][type="submit"], button[form][type="submit"]', 'click', function() {
  form_selector = "form#" + jQuery(this).attr("form") + "";
  console.log("submitting IE10 form from an orphaned control:" + form_selector);
  jQuery(form_selector).submit();
});

chrome和firefox在没有这段代码的情况下提交，并像往常一样处理带有必需属性的输入，如果任何一个必需输入为空，则停止提交并显示弹出消息。

<input required/>

IE10需要上面的javascript来提交表单，但是，如果任何带有required属性的输入为空，则通常的弹出消息不会显示在空控件上。如果我在窗体下移动控件并且不使用submit()函数，则弹出消息显示正常。

在IE10中调用submit()时如何让弹出窗口出现？

编辑：这里有一个jsfiddle来演示正在发生的事情：http://jsfiddle.net/2YYvh/5/ 在IE10和chrome / firefox

中尝试

Answer 1

如果您使用$.trigger方法，则可以激活您需要的submit按钮以启动验证。

以下是使用.trigger的示例的更新版本。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    $( document ).ready( function() {
        $('.btn-primary').click(function(event) {
            $("form#test_form input[type=submit]").trigger( "click" );
        });
    });
    </script>
</head>
<body>
<h2>
    Try this in chrome and then in IE10
    <button type="submit" class="btn btn-primary" form="test_form">
        im outside the form
    </button>
</h2>
<div class="dashWidget autoHeight" data-pagination='true'>
    <form id="test_form">
        Leave me blank:<input type="text" value="" required />
        <input type="submit" value="im in the form!"/>
    </form>
</div>

</body>
</html>

这不是直接相关的，而是另一种选择。

您可以随时创建自己的验证，例如，如果您要验证input type=email。您可以在电子邮件字段中收听input事件。如果HTML5验证会抛出typeMismatch，则使用更有用和/或讽刺的内容覆盖默认消息。

$('.email').bind('input', function () {
    //We need to reset it to blank or it will throw an invalid message.
    this.setCustomValidity('');
    if (!this.validity.valid) {
        this.setCustomValidity("Dude '" + this.value + "' is not a valid email. Try something like "+
                "jim@jboss.org. And no we are not checking if it actually works, we are just looking "+
                "for the @ sign. ");
    }
});

在IE10中从孤立控件提交时，使用必需属性进行表单验证

1 个答案: