jquery - 充当值的 HTML5 占位符

Question

我的一个客户在他们的联系表单中使用 HTML5 占位符，但突然之间，他们开始表现得像值一样，并允许在没有填充所有必填字段的情况下提交表单。

有解决方法吗？

这是一个帮助示例链接（姓名、电话号码和电子邮件）都是必填字段，但如果未正确填写，只有电子邮件会出错

Answer 1

您有一个函数custom.js将值设置为占位符文本：

 if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
     $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
 }

但是在提交时删除它的函数被注释掉了：

 $('form').submit(function () {
        //$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
    });

我也认为$.support.placeholder你在那里使用的没有定义。

Answer 2

您使用 aria-required 而不是required.

还可以查看 HTML5 表单验证：

http://www.the-art-of-web.com/html/html5-form-validation/

该站点包含有用的示例，例如：

<input type="url" name="website" required pattern="https?://.+">

编辑：

请记住，HTML5 验证应该只用于用户友好性（可用性、更好/视觉错误处理）。如果浏览器不支持 html5（就像浏览器不支持 js），则不会执行验证。所以仍然使用后端验证！