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 <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 <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.
