我试图在密码和电子邮件不匹配以及用户已经存在于Firebase中时显示错误消息。但是,我遇到一个问题,当密码匹配和电子邮件不匹配时,它不会显示该错误。有人可以帮我吗!非常感谢!!
jQuery
$("#signupButton").click(function(){
var password = $("#password").val();
var confirmPassword = $("#confirmPassword").val();
var email = $("#email").val();
var confirmEmail = $("#confirmEmail").val();
var showError = document.createElement('p');
if(!(password).match(confirmPassword)){
$(showError).addClass('error-message');
$(showError).html('*Error: Password mismatch');
$(".showErrorAfterSubmit").replaceWith(showError);
}
else if(!(email).match(confirmEmail)){
$(showError).addClass('error-message');
$(showError).html("*Error: Email mismatch");
$(".showErrorAfterSubmit").replaceWith(showError);
}
else{
firebase.auth().createUserWithEmailAndPassword(email, password)
.catch((error)=> {
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/email-already-in-use'){
$(showError).addClass('error-message');
$(showError).text('*This email is already in use. Please try another email!');
$(".showErrorAfterSubmit").replaceWith(showError);
}
})
$("form")[0].reset();//reset all fields
}
});
HTML
<body>
<h1>Email Sign Up</h1>
<div>
<p class="showErrorAfterSubmit"></p>
<form class= "validate" action="" method="POST" id="form">
<input type="text" id="username" name ="username" placeholder="Username" pattern="[a-zA-Z0-9_-]{6,}" title="*Your username must be at least 6 characters" required>
<input pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" type="password" id="password" name ="password" required title="*Your password must be at least 6 characters as well as contain
at least one uppercase, one lowercase, and one number." placeholder="Password">
<input type="password" id="confirmPassword" name ="confirmPassword" placeholder="Confirm Password" required>
<input type="email" id="email" name ="email" required placeholder="Email">
<input type="email" id="confirmEmail" name ="confirmEmail" required placeholder="Confirm Email">
<!-- <input type="submit" value="Sign Up"> -->
<div id="custom_btn">
<button type="button" id="signupButton">Sign Up</button>
</div>
</form>
</div>
<script src="./emailSignUp.js"></script>
</body>