Using JS to verify registration info?

Joined
Mar 19, 2020
Messages
2
Reaction score
0
Okay this is a bit of a complicated question with multiple parts. I'll break it down as best I can.

What I have: I am building a signin page for my website. I have the page setup as I need it and the database is set up as well. I have a PHP page that can take the info from the registration form and input it into the database. I have an account with whoisxmlapi (a service that checks an email to see if it is valid and returns the necessary info in a JSON file) and I know how to use JS to verify the emails.

What I am planning: I want to use javascript to verify the email, then verify that both password fields have the same password input, then I want to check that the username is a valid input before I pass it on to PHP to verify that the username input is unique. If, at any point, this validation fails, I want the paragraph at the top of the form to be changed so that it tells the user why the form submission failed (invalid email, passwords don't match, or username is taken). If it doesn't fail then I want the php script to run and input the data into the database.

What I am having trouble with: The biggest issue that I am having trouble with is changing the paragraph text. I've currently set up the JS script to check the email and then return a valid or invalid message (I haven't connected the php scripts yet) but when I click the submit button it either does nothing (type="button") or refreshes the page and the changes to the paragraph are reset (type="submit").

Question 1: Is this a valid method for validating user input for a signup page? If not, can you recommend a better method?
Question 2: If this method is valid, where am I going wrong?

JavaScript:
$( document ).ready(function(validateForm) {
    function validateform() {
    // runs the verifcation through whoisxmlapi
    var regemail = document.forms.registration.email.value;
    var emailapi = "https://emailverification.whoisxmlapi.com/api/v1?apiKey=at_UCofjfbCk1ZmSANtzEy0pmapuM96v&emailAddress=";
    var mailverify = emailapi.concat(jsemail);
    var obj = JSON.parse($.getJSON(mailverify));
   
    // alerts the server if email is invalid.
    if (obj.formatCheck == "true", obj.smtpCheck == "true", obj.dnsCheck == "true") {
        document.getElementById("form-notice").value="Email is valid.";
    }
    else {
        document.getElementById("form-notice").value="Email is not valid.";
    }
}
});

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta description="" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <title>Gem Cave</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
    <section class="registration">
        <div class="form-header">
            <h1>Sign Up</h1>
            <p id="form-notice" style="color: red;">This is a filler paragraph.</p>
        </div>
        <div class="signup-form">
            <form name="registration" class="new-account" onSubmit="validateForm()">
                <label for="email"><b>Email</b></label><br />
                <input type="text" placeholder="Enter Email" name="email" required><br />

                <label for="username"><b>Username</b></label><br />
                <input type="text" placeholder="Enter Username" name="username" required /><br />

                <label for="pwd"><b>Password</b></label><br />
                <input type="password" placeholder="Enter Password" name="pwd" required><br />

                <label for="pwd-repeat"><b>Repeat Password</b></label><br />
                <input type="password" placeholder="Repeat Password" name="pwd-repeat" required><br />

                <label>
                    <input type="checkbox" name="remember" style="margin-bottom:15px"> Remember me
                </label>

                <label>
                    <input type="checkbox" checked="checked" name="subscribe" style="margin-bottom:15px"> Subscribe to newsletter for story update notifications and deal alerts.
                </label>

                <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

                <button runat="server" type="button" id="form-submit" class="signupbtn">Sign Up</button>
            </form>
        </div>
    </section>
</body>
</html>
 
Joined
Jul 12, 2020
Messages
89
Reaction score
9
In order of operation once form submitted:
1. check user name against database names in use. if not avail message: username already exists, else continue to process.

2. password (using text field) and password_confirm (using password field) confirm the 2 are exactly alike. If not, message: password not a match, else continue.

3. No need to use javascript to test email address, simply send encoded link to email address. When link is clicked in email it sends member to an acceptance page where php script logs user info and marks as new member.

Note: You can build the entire process in a php script and plug it into any page using the object element. Then only the object reloads displaying the message. Search for php tutorial on "creating a membership website"
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top