引导"必需"表单验证弹出窗口不适用于ipad(safari或chrome)

Question

此标记在桌面浏览器上运行良好

<form class="form-inline" action="/action/sign-me-up" method="post" onsubmit="return false;">
<input type="email" placeholder="Email" class='email' required title="Join our email list">
</form>

如果我在输入[type = email]中提交没有有效电子邮件的表单,我会收到一个说"请填写此字段"的弹出窗口,表单不会提交.

但是,在ipad上,我确实在用户输入电子邮件时获得了实时验证(红色边框),但是如果他们点击提交,我就不会得到弹出窗口.

有一个简单的解决方法,还是我需要使用jquery插件？

Answer 1

该消息是由HTML5"required"属性触发的浏览器默认值.不幸的是iOS和其他一些浏览器还不支持它.

http://caniuse.com/form-validation

我们刚刚遇到了这个问题,我们用Webshims库解决了这个问题 - http://afarkas.github.io/webshim/demos/ 是用jQuery编写的,它建立在Modernizr之上.