JavaScript and HTML Regex not working

Question

I have a php page:

<?php
    if($_SERVER['REQUEST_METHOD'] == 'POST'){
        echo $_POST["username"];
        echo $_POST["password"];
        echo $_POST["confirm_password"];
        echo $_POST["email"];
    }
?>
<!DOCTYPE html>
<html>
<head>
    <title>WordCat Signups</title>
    <script type="text/javascript" src="signup_validate.js"></script>
</head>
<body>
    <form action="" method="POST">
        Username:<br><input type="text" name="username" placeholder="Username" onkeyup="check_username();"><span id="check_username"></span><br>
        Password:<br><input type="password" name="password" placeholder="Password" onkeyup="check_password();"><span id="check_password"></span><br>
        Confirm Password:<br><input type="password" name="confirm_password" placeholder="Confirm Password" onkeyup="check_passwords();"><span id="check_passwords"></span><br>
        Email:<br><input type="email" name="email" placeholder="Email" onkeyup="check_email();"><span id="check_email"></span><br>
        <input type="submit" name="submit" value="Signup"></br>
    </form>
</body>
</html>

I have some JavaScript which is meant to check the fields:

function check_username(){
    var username = document.getElementsByName("username")[0].value;
    var pattern = /^[\w[^!\"\#$%&\'()*+,\-.\/:;<=>?@\[\\\]^_`{|}~]]{1,32}$/;
    if(pattern.test(username)){
        document.getElementById("check_username").innerHTML = "Username is valid.";
    } else {
        document.getElementById("check_username").innerHTML = "Username is invalid. It should only contain letters, numbers, and underscores, as well as have a maximum of 32 characters.";
    }
}
function check_password(){
    var password = document.getElementsByName("password")[0].value;
    var pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)([a-zA-z0-9!\"\#$%&\'()*+,\-.\/:;<=>?@\[\\\]^_`{|}~]{6,})$/;
    if(pattern.test(password)){
        document.getElementById("check_password").innerHTML = "Password is valid.";
    } else {
        document.getElementById("check_password").innerHTML = "Password is invalid. It should have at least 6 characters, and at least one number, uppercase, and lowercase character.";
    }
}
function check_passwords(){
    var password = document.getElementsByName("password")[0].value;
    var confirm_password = document.getElementsByName("confirm_password")[0].value;
    if(password == confirm_password){
        document.getElementById("check_passwords").innerHTML = "Passwords match";
    } else {
        document.getElementById("check_passwords").innerHTML = "Passwords do not match.";
    }
}

However, for the JavaScript, the Username and Confirm Password tests are working, but the Password regex is not. When I key in a valid passwords. The regex can be found here link and it is correct for all the tests. However when use my browser the regex fails for valid passwords online!

The password regex looks alright, just [A-z] already matches \[]^_`, so you do not have to specify them in the character class. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Sep 12, 2017 at 12:25
Hmm actually I think its because my localhost on XAMPP is not updating and showing my changes... — ngmh
– ngmh, Commented Sep 12, 2017 at 12:31

AKX · Accepted Answer · 2017-09-12 12:28:59Z

2

I don't see a reason to use a single regex for a complex condition like yours (other than showing off your regex-fu)...

if(
    password.length >= 6 &&  // at least 6 characters
    /[0-9]/.test(password) && // at least one number
    /[a-z]/.test(password) && // at least one lowercase character
    /[A-Z]/.test(password) // at least one lowercase character
) {
    // yay :)
}

answered Sep 12, 2017 at 12:28

AKX

171k16 gold badges146 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ngmh Over a year ago

I will be using this for a password strength thing though thanks!

ngmh · Accepted Answer · 2017-09-12 12:33:17Z

0

Sorry everyone for the trouble. The problem was not my code and instead was XAMPP not updating the code. After I hard refreshed it with Ctrl+F5, it works well. Thanks!

answered Sep 12, 2017 at 12:33

ngmh

1751 silver badge6 bronze badges

Collectives™ on Stack Overflow

JavaScript and HTML Regex not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related