Using JS to verify registration info?

Discussion in 'Javascript' started by LovelyBunny, Mar 19, 2020.

  1. LovelyBunny

    LovelyBunny

    Joined:
    Mar 19, 2020
    Messages:
    2
    Likes Received:
    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?

    Code (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>
     
    LovelyBunny, Mar 19, 2020
    #1
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.