jQuery form validation Regexp

Question

Я делаю все правильно, чтобы подтвердить имя пользователя и пароль, но все еще не работает.

<script> 

$(document).ready(function(){ 
    $('#username1').keyup(function() { 
     $('span.error').hide(); 
     var inputVal = $(this).val(); 
     var usernameReg = /^[a-zA-Z0-9._-]{3,16}$/; 
     if(!usernameReg.test(inputVal)) { 
      $(this).after('<span class="error">Username 3-16 characters long containing letters, numbers and underscore only.</span>'); 
     } 
    }); 

    $('#password1').keyup(function() { 
     $('span.error').hide(); 
     var inputVal = $(this).val(); 
     var passwordReg = /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/; 
     if(!passwordReg.test(inputVal)) { 
      $(this).after('<span class="error">Password must be atleast 6 characters long.</span>'); 
     } 
    }); 
}); 

</script> 

Answer 1

Одна из проблем заключается в сокрытии ошибки так

$(document).ready(function() { 
 
    $('#username1').keyup(function() { 
 
    var inputVal = $(this).val(); 
 
    var usernameReg = /^[a-zA-Z0-9._-]{3,16}$/; 
 
    var $error = $(this).next('span.error'); 
 
    if (!usernameReg.test(inputVal)) { 
 
     if ($error.length) { 
 
     $error.show() 
 
     } else { 
 
     $(this).after('<span class="error">Username 3-16 characters long containing letters, numbers and underscore only.</span>'); 
 
     } 
 
    } else { 
 
     $error.hide(); 
 
    } 
 
    }); 
 
    $('#password1').keyup(function() { 
 
    var inputVal = $(this).val(); 
 
    var passwordReg = /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/; 
 
    var $error = $(this).next('span.error'); 
 
    if (!passwordReg.test(inputVal)) { 
 
     if ($error.length) { 
 
     $error.show() 
 
     } else { 
 
     $(this).after('<span class="error">Password must be atleast 6 characters long.</span>'); 
 
     } 
 
    } else { 
 
     $error.hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <input id="username1" /> 
 
</div> 
 
<div> 
 
    <input id="password1" /> 
 
</div>