Html 实现最佳实践验证空字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31903511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
materialize best practice validate empty field
提问by ciro
i use this form
我用这个表格
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email2" type="email" class="validate">
<label for="email2" data-error="wrong" data-success="right">Email</label>
</div>
<div class="input-field col s12">
<input id="example" name="example" type="text" class="validate" required="" aria-required="true">
<label for="example" data-error="wrong" data-success="right">Field</label>
</div>
</div>
</form>
</div>
mail field is ok. if I post in an incorrect mail address error message appears.
邮件字段没问题。如果我在不正确的邮件地址中发帖，则会出现错误消息。
example field not work. i would check if field is not empty and then show error.
示例字段不起作用。我会检查字段是否不为空，然后显示错误。
What's wrong?
怎么了？
回答by ichadhr
You forgot to add required=""and aria-required="true"here is the completes snippet:
您忘记添加了required=""，aria-required="true"这里是完整的代码段：
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email2" type="email" class="validate" required="" aria-required="true">
<label for="email2" data-error="wrong" data-success="right">Email</label>
</div>
<div class="input-field col s12">
<input id="example" name="example" type="text" class="validate" required="" aria-required="true">
<label for="example" data-error="wrong" data-success="right">Field</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" type="submit" name="action">Submit</button>
</div>
</div>
</form>
</div>
回答by Gabriel White
comment to ichadhr'scomment
对ichadhr 的评论发表评论
/** FIXES for error messages */
/** 修复错误信息 */
label {
width: 100%;
}
.input-field label:not(.active):after {
font-size: 0.8rem;
-webkit-transform: translateY(-140%);
-moz-transform: translateY(-140%);
-ms-transform: translateY(-140%);
-o-transform: translateY(-140%);
transform: translateY(-140%);
}
