How to check password using RegEx using jquery and without keyup function - html

Question

I want to make a signup form in which user type password which contains combination of alphabet,letter and length > 6 otherwise form will not submit
here I have shown function specifically for password only but i have other function for other input types and they are working properly but it is not.
$('#password').hide();
var password = false;
$('#user_password').focusout(function() {
check_password();
});
function check_password() {
var password = new RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/);
var password_length = $('#user_password').val().length;
if (password.test($("#user_password").val()) && password_length > 6) {
alert("hello");
$('#password').hide();
} else {
$('#password').html('Password should be more than 6 character and should contain a letter and number');
$('#password').show();
password = true;
}
}
$('#signupfrm').submit(function() {
password = false;
check_password();
if (password == false) {
return true;
} else {
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" name="signupfrm" id="signupfrm" method="post" action="<?php $_SERVER['PHP_SELF'] ?>">
//other input types above password input type
<input type="password" class="form-control" placeholder="Password..." name="user_password" id="user_password" required="">
<span id="password">
</span>
<button type="submit" class="btn btn-login" name="signup" id="signup" value="Signup">Create My Account</button>
</form>

Answer 1

You likely meant to do this
But you need to fix your regex https://regex101.com/r/ND19JO/1
I suggest this:
^(?=.{6,})(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%^&+=]).*$
6 chars one lowerCase, one upperCase and one special char
const passwordRe = new RegExp(/^(?=.{6,})(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%^&+=]).*$/);
const check_password = function() {
const pw = $('#user_password').val();
const pwOK = passwordRe.test(pw);
$('#pwError').toggle(!pwOK);
return pwOK;
}
$(function() {
$('#user_password').focusout(check_password)
$('#signupfrm').on("submit", function(e) {
if (!check_password()) e.preventDefault();
})
})
#pwError {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" name="signupfrm" id="signupfrm" method="post" action="">
<input type="password" class="form-control" placeholder="Password..." name="user_password" id="user_password" value="bla" required="">
<span id="pwError">Password should be more than 6 character and should contain a letter and number</span>
<button type="submit" class="btn btn-login" name="signup" id="signup" value="Signup">Create My Account</button>
</form>

Answer 2

If you have the correct regex, you don't have to test separately for the length:
var password = /^(?=.*\d)(?=.*[a-zA-Z])(?!.*\s).{7,15}$/;
It seems you also do not allow white space in your password. The way to prevent the form from submitting is to execute event.preventDefault() in your submit handler if the password is invalid. So the function check_password needs to return a flag that will be checked. I have removed the code that hides and unhides the password field to reduce the code to its essence:
function check_password() {
var password = /^(?=.*\d)(?=.*[a-zA-Z])(?!.*\s).{7,15}$/;
if (password.test($("#user_password").val())) {
return true;
}
else {
console.log('Password should be more than 6 character and should contain a letter and number and no spaces');
return false;
}
}
$(function() {
$('#signupfrm').submit(function() {
if (!check_password(event)) {
event.preventDefault();
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" name="signupfrm" id="signupfrm" method="post" action="<?php $_SERVER['PHP_SELF'] ?>">
<input type="password" class="form-control" placeholder="Password..." name="user_password" id="user_password" required="">
<span id="password">
</span>
<button type="submit" class="btn btn-login" name="signup" id="signup" value="Signup">Create My Account</button>
</form>
Note that you should only attempt to create the submit handler once you are sure that the document's elements have been created, i.e. element id signupform in this case. That is why that code is placed in a jQuery.ready() block (or its shortcut version). See .ready().