Question

我的客户在他们的联系表格中使用HTML5占位符，但突然间他们开始表现得像价值观并允许提交表单而不填充所有必填字段。

有解决方法吗？

Here's an example link的帮助（名称，电话号码和电子邮件）都是必填字段，但只有电子邮件在未正确填写时才会出错

Answer 1

您使用的是咏叹调而不是required。

另请参阅HTML5表单验证：

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

此网站包含以下有用示例：

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

修改

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

Answer 2

您的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没有定义。

HTML5占位符充当值

2 个答案: