javascript - jQuery not removing selectors -
this bugs been annoying me bit now, im having validate form data client side before being pushed external api
im validating requirements on user passwords function
//check passwords match , strong enough $(document).on('change', '#password-confirm', function () { var $password = $('#password').val(); var $password_confirmation = $(this).val(); if ($password.length >= 8) { $('#password').parent().removeclass("validationerrors"); $('#password-confirm').parent().removeclass("validationerrors"); $('#password-help-block').removeclass("validationerrors").removeclass("passwordvalidationerrors"); console.log($('#password').parent()); console.log($('#password-confirm').parent()); if ($password === $password_confirmation) { //passwords match check strengths enough if ($('.strength_meter div').hasclass('veryweak')) { //passed validation $(this).parent().addclass("validationerrors"); } if ($('.strength_meter div').hasclass('weak')) { $(this).parent().addclass("validationerrors"); } else { //strong enough $('#email').parent().removeclass("validationerrors"); } } else { //passwords dont match $(this).val('your password not match'); $('#password').parent().addclass("validationerrors"); } } else { //not long enough throw error $('#password').parent().addclass("validationerrors"); $('#password-confirm').parent().addclass("validationerrors"); $('#password-help-block').addclass("validationerrors").addclass("passwordvalidationerrors"); } });
the html followed
<div class="input-wrapper"> <input type="password" name="password" id="password" class="input-text strength" aria-describedby="password-help-block" aria-required="true" data-password="password"> <input style="display:none" class="strength" data-password="password" type="text" name="" value=""><a data-password-button="password" href="" class="button_strength">show password</a> <div class="strength_meter"> <div data-meter="password"><span></span> </div> </div> <button type="button" class="button button-icon help-block-trigger" data-target="password-help-block"><i class="icon icon-info"></i> </button> </div> <div class="input-wrapper field"> <input type="password" name="password-confirm" id="password-confirm" class="input-text" aria-required="true"> </div>
when passwords not long enough works expected adding .validationerrors css class when go make password 8 characters removes validationerrors class #password parent attribute not #password-confirm parent, no explanation
any ideas????
Comments
Post a Comment