How to syntactically use pattern in javascript with match method?

Question

I aim at using specific pattern to check user inputs in a form and to be honest I am a beginner in javascript and not used to javascript syntax since I recently realised I would need it for my code. More specifically my issue is the use of patterns. I went on regexr.com that gives patterns code and make you able to create your own. On there I took already existing ones for passwords (for the password it's at least 8 characters 1 uppercase 1 lowercase and 1 number) and emails. And on regexr.com the Password Rockyh12 for example match the pattern but when I add it to my website, it says it doesn't meet the password requirements. I think it is my way of putting the patterns in javascript the problem

if(!password.value.match(pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$)"))

The html code for the site

<form>
    <div class="tab tab-1 active"><h3 class="infos">Credentials</h3>
        <p>
            <label ">Email address&nbsp;<span class="required" >*</span></label>
            <input type="text" autocomplete="email" name="email" id="reg_email" value="" required />
        <div id="email_validation" style="color: red;></div>
        </p>



        
            <p>
                <label for="reg_password">Password&nbsp;<span class="required">*</span></label>
                <input type="text" name="password" id="reg_password" autocomplete="new-password" required />
                <div id="password_validation" style="color: red;"></div>
            </p>
                <br>
            
        
        

    <div class="next-0 next">
        <button type="button" name="next_1">Next</button>
    </div>
    <div class=""></div>

    </div>
</form>

and the javascript is here:

//--------EMAIL CHECK--------------------------------------------------------------------------------------------------------------------

const email = document.querySelector('input[name="email"]');
    var emailValidation = document.getElementById('email_validation');

    email.addEventListener("focus", (event) => {


         if(!email.value.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)){
           emailValidation.innerHTML="Please enter a valid email address";
           return false;
        }

        else{
            return true;
        }
});

email.addEventListener("keyup", (event) => {
    
    if(!email.value.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)){
      emailValidation.innerHTML="Please enter a valid email address";
      return false;
   }else {
    emaildValidation.innerHTML="";
    event.target.style.borderColor = "green";
       return true;
   }
});
//---------------------------------------------------------------------------------------------------------------------------------------------






// ------PASSWORD CHECK-----------------------------------------------------------------------------------------------------------------
    const password = document.querySelector('input[name="password"]');
    var passwordValidation = document.getElementById('password_validation');

    password.addEventListener("focus", (event) => {
    
         if(!password.value.match(pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$)")){
           passwordValidation.innerHTML="Password must be at least 8 character and contain 1 uppercase,1 lowercase and 1 number";
           return false;
        }

        else{
            return true;
        }
});

password.addEventListener("keyup", (event) => {
    
    if(!password.value.match(pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$")){
      passwordValidation.innerHTML="Password must be at least 8 character and contain 1 uppercase,1 lowercase and 1 number";
      return false;
   }else {
    passwordValidation.innerHTML="";
    event.target.style.borderColor = "green";
       return true;
   }
});
//-----------------------------------------------------------------------------------------------------------------------------------------

I have tried deleting the brackets around the pattern code and "pattern" leaving it like this

if(!password.value.match(^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$))

still I don't know what pattern it has been set to but it still don't work.

/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$)/.test(password.value) — Unmitigated
– Unmitigated, Commented Mar 8, 2023 at 20:55
You're doing it correctly on your email.value.match method. Replicate that. I'm not sure where you're getting pattern="" from, but I've never seen that. Docs for your method: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Josh
– Josh, Commented Mar 8, 2023 at 20:56
Also, String.prototype.match() returns an array of the results. If you don't plan to do anything with those results, then you're better off using RegExp.prototype.test(), which returns boolean. — Josh
– Josh, Commented Mar 8, 2023 at 20:59
pattern= is something you can use as an HTML attribute to make the browser do validation automatically, instead of writing your own JavaScript. You don't put it in the JavaScript. — Barmar
– Barmar, Commented Mar 8, 2023 at 21:06

RAllen · Accepted Answer · 2023-03-08 21:16:29Z

0

Looks like the pattern that you are trying to use is from here

You can use it like so:

const check = (str) => {
  if(str.match(/^(?=^.{8,}$)(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^A-Za-z0-9]).*$/)) {
    console.log(str + ' valid');
  } else {
    console.log(str + ' invalid');
  }
}

check('abcdABCD123!');  // valid
check('abcdABCD123');   // invalid - no symbols
check('abcAB');         // invalid - too short
check('ABCDEFG1!');     // invalid - no lowercase
check('abcdefg1!');     // invalid - no uppercase
check('abcdefgA!');     // invalid - no digits

Please let me know if this helps.

answered Mar 8, 2023 at 21:16

RAllen

1,5051 gold badge8 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

How to syntactically use pattern in javascript with match method?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related