当密码和电子邮件不匹配时显示错误消息

时间:2018-11-27 06:00:04

标签: javascript jquery html

我试图在密码和电子邮件不匹配以及用户已经存在于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>

0 个答案:

没有答案