复选框上的Material Design Lite所需的验证未显示错误消息 [英] Material design lite required validation on checkbox is not showing error message
问题描述
我正在将材料设计精简版用于表格.我面临的问题是，当在复选框上设置了所需的验证时，它似乎一经呈现就隐藏了错误消息.
I am using material design lite for a form. The issue that I'm facing is that when required validation is set on a checkbox, it seems to be hiding the error message as soon as it gets rendered.
请注意，实际的验证正在按预期方式工作，只是未显示错误消息.
Please note that the actual validation is working as expected, just the error message is not being displayed.
这是一个存在此问题的Codepen- http://codepen.io/anon/pen/LVqPzm
Here is a codepen with this issue - http://codepen.io/anon/pen/LVqPzm
以下是使用的HTML:
Here is the HTML used:
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"> </script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<form>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" required />
<span class="mdl-checkbox__label">Checkbox</span>
</label>
<input type="submit">
</form>
</body>
</html>
对于如何获取所需的验证消息以正确显示复选框的任何帮助，我们将不胜感激
Any help regarding how to get the required validation message for checkbox to be displayed properly will be highly appreciated
请注意，此问题特定于Chrome
Please note that this issue is specific to Chrome
推荐答案
我对此问题进行了CSS修复
I made my CSS fix for this issue
.mdl-checkbox.is-upgraded .mdl-checkbox__input {
-webkit-appearance: checkbox;
width: auto;
height: auto;
left: 2px;
top: 5px;
}
这是您的笔更新的信息> http://codepen.io/anon/pen/grGmZW
Here is your pen updated > http://codepen.io/anon/pen/grGmZW
这篇关于复选框上的Material Design Lite所需的验证未显示错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
