注册表单验证问题

Question

I'm fairly new to developing for the Web and I'm currently working on a Sign Up form for a website so a website could take in new users. Making the form so far have been pretty painless with help from the big 'ol internet but I've run into a wall recently on how to validate certain information in my form before submitting for an actual database query.

So I have the following form:

And the input fields work as intended most of the way. They flash red if they are not filled out and ask for input:

Except for when it comes to the Email fields. They need to be the same and not just valid emails as the website assumes right now. So even if you have two completely different emails in those two fields, as long as they are valid emails it'll be accepted.

The following is the HTML behind the form:

<!-- Container Start -->
<div id="container">
    <div id="container_body">
        <div>
            <h2 class="form_title">Sign Up for a Collectors Account Here!</h2>
        </div>
        <!-- Form Start -->
        <div id="form_name">
            <div class="FirstAndLastName">
                <form name="form">
                <div id="errorBox"></div>
                    <input type="text" required value="" name="Name" value="" placeholder="First Name" class="input_name">
                    <input type="text" required value="" name="LastName" value="" placeholder="Last Name" class="input_name">
            </div>
                <div id="email_form">
                    <input type="email" required value="" name="Email" value="" placeholder="Your Email" class="input_email">
                </div>
                <div id="Re_email_form">
                    <input type="email" required value="" name="enterEmail" value="" placeholder="Re-enter Email" class="input_Re_email">
                </div>
                <div id="password_form">
                    <input type="password" required value="" name="Password" value="" placeholder="Your Password Here" class="input_password">
                </div>
                <div>
                    <script>
                        $(function() {
                            $("#datepicker").datepicker({
                                inline: true,
                                showOtherMonths: true,
                                dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
                            });
                        });
                    </script>
                    <h3 class="birthday_title">Birthday</h3>
                    <input type="text"  required value="" id="datepicker">
                </div>
                <div id="radio_button">
                    <input type="radio" name="radiobutton" value="Female" checked="true">
                    <label>Female</label>
                    &nbsp;&nbsp;&nbsp;
                    <input type="radio" name="radiobutton" value="Male">
                    <label>Male</label>
                </div>
                <div>
                    <input type="submit" value="Sign Up" onclick="Submit()">
                </div>
            </form>
        </div>
        <!-- Form Ends -->
    </div>
</div>
<!-- Container Ends -->

And here is the JavaScript I use:

function Submit() {
    var myForm = document.forms[0];
    var MyFormElements = myForm.elements;
    for (var i in myFormElements) {
        var element = myFormElements[i];
        if (!element.willValidate) {
            continue;
        }
        element.addEventListener('invalid', function (e) {
            document.getElementById("errorBox").innerHTML = "Invalid Input Detected";
            myForm.classList.add('validated');
        });
    }
    if($('#Re_email_form').attr('value') != $('#email_form').attr('value')) {
        event.preventDefault();
    }
}

So the question is, how do I make this form check if both email fields contain the exact same values and stops the submit process with an error message if they are not the exact same?

I have a second question as well which is slightly off topic: When you submit this form it seems that the password is stored as plain text even though it's done in a password field. I realize that the website I'm working on will have a SHA-2 certificate to also accompany things like Facebook login (which makes that mandatory) but how would I get around this? Use an algorithm to encrypt it before trying to submit it as a new user in my database?

Again, I'm fairly new at this, so I apologize for cringe-worthy code and practices in advance. All of the help I can get is very much welcomed.

Answer 1

You should change your last if statement to this -

if($('#Re_email_form').find('input').val() != $('#email_form').find('input').val()) {
    alert('Emails not matching!');
    return false; // cancels the submission process
}

Answer 2

Here is a version little better performance wise and in pure JS for clarity :D

Here is the JSFiddle demo

Screenshot:

//HTML

<html>
<head>
    <link rel="stylesheet"href="index.css">
    <script src="index.js"></script>
</head>
<body>
    <form>
        <input type="email" placeholder="email" name="email" spellcheck="false" autocomplete="off">
        <input type="email" placeholder="verify email" name="verify_email" spellcheck="false" autocomplete="off">
        <input type="password" placeholder="password" name="pass" onkeypress="keyListener(event,this);">
        <button type="button" onclick="auth(this);">Sign In</button>
    </form>
    <mark id="form-msg"></mark>
</body>
</html>

//JS

function auth(ele){
    var emails = new Array();
    var msg = document.getElementById("form-msg");
    var form = ele.parentNode.children;
    for(var i=0; i<form.length; i++){
        if(form[i].type === "email"){
            emails.push(form[i]);
        }
    }
    if(emails[0].value !== emails[1].value){
        msg.innerHTML = "Emails don't match";
    }
    else{
        var client = new XMLHttpRequest();
        var data = new FormData();
        var form = ele.parentNode.children;
        for(var i=0; i<form.length; i++){
            if(form[i].type !== "button") {
                data.append(form[i].name, form[i].value);
            }   
        }
        client.open("POST", "signin.php"); //your php page
        client.send(data);
        client.onreadystatechange = function(){
            if(client.readyState == 4){
                if(client.response = "success"){
                    msg.innerHTML = "success";
                    setTimeout(function(){
                        window.location = "http://facebook.com"; //redirect to account home page
                    }, 2000);
                    console.log(client.response);
                }
            }
        }
    }
}
function keyListener(e,ele){
    if(e.keyCode === 13){
        auth(ele);
    }
}

//CSS

body{
    margin: 0 !important;
    width: 100vw;   
    height: 100vh;
    background: #1E67CB;

    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: column;
    flex-direction: column;


    -webkit-justify-content: center;
    justify-content: center;
}
form{
    cursor: default !important;

    display: -webkit-flex;
    display: flex;

    -webkit-justify-content: center;
    justify-content: center;

    -webkit-align-self: center;
    align-self: center;

    -webkit-flex-direction: column;
    flex-direction: column;

    background: #ECF0F1;

    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    padding: 1.3em;
}
form>input{ 
    width: 22.1em;;
    height: 2.5em;
    margin: 0.2em 0;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
    text-align: center;
    border: 1px solid #d5dadc;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    color: #7C7C7C;
    outline: none;
}
#form-msg{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-self: center;
    align-self: center;
    height: 1.5em;
    margin: 1.5em;
    font-size: 1em;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
    background: none;   
}
form>button{
    width: 22.35em; 
    height: 2.5em;
    margin: 0.2em 0;
    padding: 0;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    font-family: HelveticaNeue-Light,"Helevetica Neue",Helvetica,Arial;
    cursor: pointer;
    outline: none;
    border: none;
    color: #fff;
    background: #2ECC71;
    border-radius: 2px;
    -webkit-border-radius: 2px;
}
form>button:hover{
    background: #40D47E;
}
form>button:active{
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.valid{
    border: 1px solid #2ECC71;
}
.invalid{
    border: 1px solid red;
}