0

I'm trying to create an account for a user and I want to strengthen the password, what should I add?

I don't know to strengthen the password, by this I meant that I want to require Upper case and lower case as well as adding numbers to a password.

am I missing something? or something is wrong here? Should I change everything here?

<div class="form-group row">
  <label class="col-12 col-sm-3 col-form-label text-sm-right">Username</label>
  <div class="col-12 col-sm-8 col-lg-6">
  <input data-parsley-type="alphanum" type="text" name="username" pattern="(?=.*[a-z]).{10, }.+" required="" placeholder="" class="for m-control">
   </div>
</div>
<div class="form-group row">
  <label class="col-12 col-sm-3 col-form-label text-sm-right" for="pass1">Password</label>
  <div class="col-12 col-sm-8 col-lg-6">
  <input  data-parsley-type="alphanum" type="passwrd" id="password" name="password"  required="" placeholder="" class="form-control" onkeyup="return validate()">
    <ul>
        <li id="uppercase">At least 1 Uppercase Character</li>
        <li id="lowercase">At least 1 Lowercase Character</li>
        <li id="num">At least 1 Number</li>
        <li id="maxChar">At least 8 characters long</li>
    </ul>
   </div>
</div>

tried this for the js I think I messed everything up here since it is not working

$(document).ready(function(){
            var lowercase = new RegExp('[a-z]');
            var uppercase = new RegExp('[A-Z]');
            var number = new RegExp('[0-9]');
            $("#password").keyup(function(){
                var password = $(this).val()
                    if(password.length == 8){
                        $("maxChar").css("color", "green");
                    }else{
                        $("maxChar").css("color", "red");
                    }
                    if(password.match(lowercase)){
                        $(".lowercase").css("color", "green");
                    }else{
                        $(".lowercase").css("color", "red");
                    }
                    if(password.match(uppercase)){
                        $(".uppercase").css("color", "green");
                    }else{
                        $(".uppercase").css("color", "red");
                    }
                    if(password.match(number)){
                        $(".num").css("color", "green");
                    }else{
                        $(".num").css("color", "red");
                    }
                    if (/^[a-zA-Z0-9]=$/.test(password) == false){

                    }   $(".symbol").css("color", "green");
                    }else{
                        $(".symbol").css("color", "red");
                    }
            })
    </script>-->
user3783243
  • 5,368
  • 5
  • 22
  • 41
yumie
  • 3
  • 1
  • 5
    You probably don't want to force the password length to be exactly 8 characters – Pointy Dec 01 '22 at 15:09
  • 1
    What is meant with `[a-zA-Z0-9]=`? That would be a single letter or number and an equal sign. – user3783243 Dec 01 '22 at 15:10
  • 2
    "*I think I messed everything up"* - Why do you think that? What actual problem are you observing? *"it is not working"* - What is "not working" about it? Are you getting an error? An unexpected result? Something else? When you step through the code in a debugger, which specific operation produces an unexpected result? – David Dec 01 '22 at 15:11
  • 2
    [Mandatory comic](https://xkcd.com/936/) – DarkBee Dec 01 '22 at 15:13
  • I've seen on other sites that you can style those requirements as a checkbox, then in your keyUp function, check which of the requirements are accomplished and mark them as completed. Only let the user submit once all of the requirements are completed. – Justin Chang Dec 01 '22 at 15:20

1 Answers1

1

There are issues with your code:

  • it produces syntax error: excess {, and missing })
  • the referenced elements are off: class vs id
  • logical error: test for >=
  • regex error for symbol
  • onkeyup="" not needed when using jQuery

Fixed code:

$(document).ready(function() {
  $("#password").keyup(function() {
    var password = $(this).val();
    if(password.length >= 8){
      $("#maxChar").css("color", "green");
    } else {
      $("#maxChar").css("color", "red");
    }
    if(/[a-z]/.test(password)) {
      $("#lowercase").css("color", "green");
    } else {
      $("#lowercase").css("color", "red");
    }
    if(/[A-Z]/.test(password)) {
      $("#uppercase").css("color", "green");
    } else {
      $("#uppercase").css("color", "red");
    }
    if(/[0-9]/.test(password)) {
      $("#num").css("color", "green");
    } else {
      $("#num").css("color", "red");
    }
    if(/[^a-zA-Z0-9]/.test(password)) {
      $("#symbol").css("color", "green");
    } else {
      $("#symbol").css("color", "red");
    }
  }).trigger('keyup');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
  <label class="col-12 col-sm-3 col-form-label text-sm-right">Username</label>
  <div class="col-12 col-sm-8 col-lg-6">
  <input data-parsley-type="alphanum" type="text" name="username" pattern="(?=.*[a-z]).{10, }.+" required="" placeholder="" class="for m-control" />
   </div>
</div>
<div class="form-group row">
  <label class="col-12 col-sm-3 col-form-label text-sm-right" for="pass1">Password</label>
  <div class="col-12 col-sm-8 col-lg-6">
  <input  data-parsley-type="alphanum" type="password" id="password" name="password"  required="" placeholder="" class="form-control" />
    <ul>
        <li id="uppercase">At least 1 Uppercase Character</li>
        <li id="lowercase">At least 1 Lowercase Character</li>
        <li id="symbol">At least 1 Symbol</li>
        <li id="num">At least 1 Number</li>
        <li id="maxChar">At least 8 characters long</li>
    </ul>
   </div>
</div>
Peter Thoeny
  • 7,379
  • 1
  • 10
  • 20
  • But I still have one problem, why does it still proceeds in creating the username and password even when I only put 1 character in it? although it does checks the 8 characters long at least. – yumie Dec 02 '22 at 01:57
  • You'd need to set a flag if any check fails, and if so disable the form submit button – Peter Thoeny Dec 02 '22 at 02:03
  • here's my submit button is something missing here? `
    `
     – yumie Dec 02 '22 at 02:24
  • Add an ID to the button such as `id="registerButton"`, set a `weakPasswordFlag` variable in the `.keyup()` function, and at the end of you `.keyup()` function enable/disable the button based on that flag: `$('#registerButton').prop('disabled', weakPasswordFlag);` – Peter Thoeny Dec 02 '22 at 02:50