this is the signup.html
<head>
<script>try{Typekit.load({async:true})}catch(e){}</script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<main>
<div class="container">
<div class="rowjustify-content-center">
<div class="card" style="width: 700">
<div class="card-header">Sign-in</div>
<div class="card-body">
<form>
<div class="form-group row mt-2">
<label for="name" class="col-md-4 text-md-right">username</label>
<div class="col-md-8">
<input type="text" id="name" class="form-control" name="name" autofocus placeholder="Enter your username">
<span class="text-danger" id="nameErr"></span>
</div>
</div>
<div class="form-group row mt-2">
<label for="email" class="col-md-4 text-md-right">Email Address</label>
<div class="col-md-8">
<input type="text" id="email_address" class="form-control" name="email" autofocus placeholder="Enter your E-mail">
<span class="text-danger" id="emailErr"></span>
</div>
</div>
<div class="form-group row mt-2">
<label for="password" class="col-md-4 text-md-right">Password</label>
<div class="col-md-8">
<input type="password" id="password" class="form-control" name="password" autofocus placeholder="Enter your Password">
<span class="text-danger" id="passwordErr"></span>
</div>
</div>
<div class="form-group row mt-2">
<label for="confirm_password" class="col-md-4 text-md-right">Confirm Password</label>
<div class="col-md-8">
<input type="password" id="confirm_password" class="form-control" name="confirm_password" autofocus placeholder="Confirm your Password">
<span class="text-danger" id="confirmPasswordErr"></span>
</div>
</div>
<div class="form-group row mt-2">
<div class="col-md-4"></div>
<div class="col-md-8">
<button type="button" id="saveUser" class="btn btn-primary">
Signup
</button>
<p class="text-black mt-2 md-2">I already have an Account<a href="index.html" style="text-decoration: none;"> Login instead</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
<script src="validation.js"></script>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.9.0/firebase-app.js";
import { getAuth,createUserWithEmailAndPassword} from "https://www.gstatic.com/firebasejs/10.9.0/firebase-auth.js";
import { getDatabase,ref,set,push,onValue } from "https://www.gstatic.com/firebasejs/10.9.0/firebase-database.js";
const firebaseConfig = {
apiKey: "AIzaSyCSo3famPMMJyMScocGU3RoS5ymYIIAg04",
authDomain: "chat-app-773eb.firebaseapp.com",
databaseURL: "https://chat-app-773eb-default-rtdb.firebaseio.com",
projectId: "chat-app-773eb",
storageBucket: "chat-app-773eb.appspot.com",
messagingSenderId: "171300962157",
appId: "1:171300962157:web:07e0424dd238e9c52d2464",
measurementId: "G-16GTKY9G7Y"
};
const app = initializeApp(firebaseConfig);
const db = getDatabase();
function saveUserToFirebase(){
if(validateSignUpInputCredentials()){
const auth = getAuth(app);
createUserWithEmailAndPassword(auth,email,password)
.then((userCredentials)=>{
const user = userCredentials.user;
push(ref(db,'/registered_users'),{
userid : uid,
email : user.email
}).then(()=>{
alert('Successfully Registered');
location.href=index.html;
})
}).catch((error)=>{
const errorCode = error.code;
const errorMessage = error.messagee;
})
}
}
$("#saveUser").on('click',function(){
saveUserToFirebase();
})
</script>
</body>
</html>
and this is the following validation.js script
function printError(elemID, hintMsg) {
var element = document.getElementById(elemID);
if (element) {
element.innerHTML = hintMsg;
} else {
console.error("Element with ID '" + elemID + "' not found.");
}
}
function validateSignUpInputCredentials(){
username=document.getElementById("name").value;
email=document.getElementById("email_address").value;
password=document.getElementById("password").value;
confirmpassword=document.getElementById("confirm_password").value;
var nameErr = emailErr = passwordErr = confirmpasswordErr = true;
//validate username
if(username == ""){
print("nameErr", "Please Enter your username");
} else {
//Regular expression for basic username validation
var regex = /^[A-Za-z ]+$/;
if(regex.test(username) === false){
printError("nameErr","Please enter a valid username");
} else {
printError("nameErr", "");
nameErr = false;
}
}
//validate email address
if(email == ""){
print("emailErr", "Please Enter your E-Mail Address");
} else {
//Regular expression for basic email validation
var regex = /^\S+@\S+\.\S+$/;
if(regex.test(email) === false){
printError("emailErr","Please enter a valid E-Mail address");
} else {
printError("emailErr", "");
nameErr = false;
}
}
//validate password
if(password == ""){
print("passwordErr", "Please Enter your Password");
} else {
printError("passwordErr", "");
nameErr = false;
}
//validate password
if(confirmpassword == ""){
print("confirmPasswordErr", "Please confirm your Password");
} else {
printError("confirmPasswordErr", "");
nameErr = false;
}
if (nameErr || emailErr || passwordErr || confirmpasswordErr) {
return false;
} else {
return true;
}
}
I tried changing names and IDs of the elements and some other things like rechecking them in the validation file of the script. PLEASE HELP ME. i have to submit this plus i'm also trying to enjoy this, but its becoming really hard to.
I've also tried redoing the entirety of this from scratch again and now, when pushing the button it gives me prompt for printing this web page in pdf format. but atleast i got to know that the button is working, so that was an upgrade.