I need to make changes to the java script code I need to make a conform pasword
ID: 3698989 • Letter: I
Question
I need to make changes to the java script code I need to make a conform pasword feild
here is the JS code
<script>
var myInput = document.getElementById("pass");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
// When the user clicks on the password field, show the message box
myInput.onfocus = function() {
document.getElementById("message").style.display = "block";
}
// When the user clicks outside of the password field, hide the message box
myInput.onblur = function() {
document.getElementById("message").style.display = "none";
}
// 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");
}
}
</script>
This is the php code;
<?php
$username = "root";
$password = "";
$hostname = "localhost";
$dbname = "lab";
$selected = mysqli_connect($hostname, $username, $password, $dbname);
if(isset($_POST['user']) && isset($_POST['pass'])){
$user = $_POST['user'];
$pass = $_POST['pass'];
$query = "SELECT * FROM users WHERE username='$user'";
$result = mysqli_query($selected, $query);
if(mysqli_num_rows($result) > 0 ) { //check if there is already an entry for that username
echo "Username already exists!";
}else{
$query = "INSERT INTO users (username, password) VALUES ('$user', '$pass')";
$result = mysqli_query($selected, $query);
header("location:index.php");
}
}
mysqli_close($selected);
?>
<html>
<body>
<h1>Signup!</h1>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
<p>Username:</p><input type="text" name="user" />
<p>Password:</p><input type="password" name="pass" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required/>
<br>
<br>
<input type="password" placeholder="Confirm Password" id="cpass" required>
<br>
<input type="submit" value="Signup!" />
</form>
</body>
</html>
Here is the SQL
CREATE TABLE IF NOT EXISTS users(
id int(11) NOT NULL AUTO_INCREMENT,
username varchar(50) NOT NULL,
password varchar(255) NOT NULL,
created_at datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (id),
UNIQUE KEY username(username)
) ;
Explanation / Answer
<!-- try to place this HTML code in place of the code you sent in this code -->
<!-- you forgot to give id to the password input field and you are accessing the field in the javascript.-->
<!-- java script code will work properly-->
<!-- now try it. it will work-->
<html>
<body>
<h1>Signup!</h1>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); method="POST">
<p>Username:</p>
<input type="text" id="user" name="user" required />
<p>Password:</p>
<input type="password" id="pass" name="pass" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain
at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required/>
<br>
<p>Confirm Password</p>
<input type="password" placeholder="Confirm Password" id="cpass" required>
<br>
<br>
<input type="submit" value="Signup!" />
</form>
</body>
</html>