javascript - Materalize CSS error labels -
materalize supports validation input fields such email, validate input fields such passwords on fly. means adding error or success label through javacript.
my success far has been poor. when call change()
js function , try addclass('valid')
example, nothing happens , can see, class doesn't appear in html. know function working because if add nonsense class 'test', display in html.
is not simple adding 'valid'
or 'invalid'
- need meet other criteria before label appear?
any appreciated.
my solution include error labels below:
<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>
but making sure hide label default. had modify classes javascript , show label. if don't hide default, input automatically validates label. js is:
$('#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(); }
});
Comments
Post a Comment