对 CSS 错误标签进行材料化处理
Materalize CSS error labels
Materalize 已经支持对输入字段(如电子邮件)进行验证,但我想即时验证密码等输入字段。基本上,这意味着通过javacript添加错误或成功标签。
到目前为止,我的成功很差。例如,当我调用 change()
JS 函数并尝试addClass('valid')
时,没有任何反应,从我所看到的,该类甚至没有出现在 HTML 中。我知道该函数正在工作,因为如果我添加一个像"test"这样的废话类,它确实会显示在 HTML 中。
添加'valid'
或'invalid'
不是那么简单吗 - 我需要满足其他条件才能显示标签吗?
任何帮助将不胜感激。
我的解决方案是包含以下错误标签:
<div class="input-field col s9 offset-s1">
<i class="material-icons prefix">perm_identity</i>
<input id="register_user" name ="register_user" type="text">
<label id="reg-user-error" style="display:none" for="register_user" data-error="short" data-success="good">Username</label>
<label for="register_user">Username</label>
</div>
但请确保默认情况下隐藏标签。然后我只需要用javascript修改类并显示标签。如果您默认不隐藏,则任何输入都会自动验证标签。我的JS是:
$('#register_user').on('change',function()
{
if($('#register_user').val().length > 7)
{
if($('#register_user').hasClass('invalid'))
{
$('#register_user').removeClass('invalid');
}
$('#register_user').addClass('valid');
$('#reg-user-error').addClass('active');
$('#reg-user-error').show();
}
else if($('#register_user').val().length < 8)
{
if($('#register_user').hasClass('valid'))
{
$('#register_user').removeClass('valid');
}
$('#register_user').addClass('invalid');
$('#reg-user-error').addClass('active');
$('#reg-user-error').show();
}
});
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- keyup事件处理程序更改焦点不适用于快速键入
- 如何使用jquery处理php循环通过元素
- angular.js没有'无法在PhoneGap中处理视图标记
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- 提示使用服务器端事件处理程序激活JavaScript
- javascript:如何在antlr生成的Lexer中进行错误处理
- 如何编写一个具有公共标头的批处理
- 在同一个服务工作者中处理service-worker.js有任何影响吗
- 如何处理node.js节点mongodb中的连接和查询队列
- 通过命令行/批处理文件打开页面时,将javascript代码注入Google Chrome
- 如何处理10页以上的静态页眉/页脚
- 将事件处理程序绑定到任何可能的事件
- 通过ajax将坐标传递到php服务器端,并在处理后检索到javascript
- python到“;流“;字典处理
- JavaScript的额外材料:理解奇怪的部分
- 使用javascript进行实时图像处理
- 导入jQuery脚本获胜'我不处理html文件
- Javascript无法处理表单提交
- 对 CSS 错误标签进行材料化处理