Question: I need help figuring out why my email tag doesn't require a @ symbol and why the only special character my website accepts for a
I need help figuring out why my email tag doesn't require a @ symbol and why the only special character my website accepts for a password is # and no others. THE JAVASCRIPT NEEDS TO BE CALLED FROM A FILE NAMED scripts.js.
Login
Please enter your personal data.
Please enter your first name
The name field must not be empty.
Please enter Valid Email
Email must be in a@bc.com format
Password must contain the following:
A lowercase letter
An Uppercase letter
A number
A Special Character([,$,&,+,:,;,=,?,@,#,] or ,)
Minimum of 8 characters
var myInput = document.getElementById("psw"); var letter = document.getElementById("letter"); var capital = document.getElementById("capital"); var number = document.getElementById("number"); var length = document.getElementById("length"); var spclchr=document.getElementById("spclchr");
var myInputName = document.getElementById("usrname"); var notempty = document.getElementById("notempty");
var myInputEmail = document.getElementById("email"); var valemail = document.getElementById("valemail"); // When the user clicks on the password field, show the message box myInput.onfocus = function () { document.getElementById("messagepass").style.display = "block"; } myInputName.onfocus = function () { document.getElementById("namepass").style.display = "block"; }
myInputEmail.onfocus = function () { document.getElementById("emailpass").style.display = "block"; }
// When the user clicks outside of the password field, hide the message box myInput.onblur = function () { document.getElementById("messagepass").style.display = "none"; } myInputName.onblur = function () { document.getElementById("namepass").style.display = "none"; } myInputEmail.onblur = function () { document.getElementById("emailpass").style.display = "none"; }
myInputName.onkeyup=function(){ if (myInputName.value.length>0){ notempty.classList.remove("invalid"); notempty.classList.add("valid"); } else{ notempty.classList.remove("valid"); notempty.classList.add("invalid"); } }
myInputEmail.onkeyup=function(){ if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(myInputEmail.value)){ valemail.classList.remove("invalid"); valemail.classList.add("valid"); } else{ valemail.classList.remove("valid"); valemail.classList.add("invalid"); } } // When the user starts to type something inside the password field myInput.onkeyup = function () { // Validate lowercase letters var lowerCaseLetters = /[a-z]/g; if (myInput.value.match(lowerCaseLetters)) { letter.classList.remove("invalid"); letter.classList.add("valid"); } else { letter.classList.remove("valid"); letter.classList.add("invalid"); }
// Validate capital letters var upperCaseLetters = /[A-Z]/g; if (myInput.value.match(upperCaseLetters)) { capital.classList.remove("invalid"); capital.classList.add("valid"); } else { capital.classList.remove("valid"); capital.classList.add("invalid"); }
// Validate numbers var numbers = /[0-9]/g; if (myInput.value.match(numbers)) { number.classList.remove("invalid"); number.classList.add("valid"); } else { number.classList.remove("valid"); number.classList.add("invalid"); }
// Validate length if (myInput.value.length >= 8) { length.classList.remove("invalid"); length.classList.add("valid"); } else { length.classList.remove("valid"); length.classList.add("invalid"); } //Validate Special Char var spcchars = /[\$\&\+\,\:\;\=\?\@\#]/g; if (myInput.value.match(spcchars)) { spclchr.classList.remove("invalid"); spclchr.classList.add("valid"); } else { spclchr.classList.remove("valid"); spclchr.classList.add("invalid"); } }
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
