Click here to Skip to main content
14,486,801 members
Rate this:
Please Sign up or sign in to vote.
I've been trying to get more generic answers and failing so I'm going to be more specific. I am trying to create a registration page for my website. The form includes email, username, password, and repeat password. I am using javascript to verify the inputs and I need it to change the text of a paragraph if the verification fails to tell the user why it failed. At the moment I am focused on email verification but can't get it to display a pass or fail response. The signup button either refreshes the page (type="submit") or does nothing at all (type="button"). I've read all the usual advice and tried them but it hasn't made a difference.

$( 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.";
    }
}
});


<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">Email</label><br />
                <input type="text" placeholder="Enter Email" name="email" required><br />

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

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

                <label for="pwd-repeat">Repeat Password</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>


What I have tried:

the most common advice I've found for this issue is to change the button type from "submit" to "button" and while this stopped it from refreshing, it also rendered the button entirely inoperable.

I've also been given the advice to put the function inside a $( document ).ready(function()) but didn't find much to suggest the proper syntax for this, I had to make my best guess.
Posted
Updated 20-Mar-20 10:29am

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

JavaScript and hyphens don't play well together; I would use the debugger within your browser and see if it is throwing errors.

Something simple to see if this is the issue is to just rename the form-notice element
<script type="text/javascript">
    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.";
    }
</script>

<p id="form-notice" style="color: red;">This is a filler paragraph.</p>
Hyphens in HTML and CSS:
HTML5 attributes can start with data- (data-quantity, data-price).
CSS uses hyphens in property-names (font-size).

Hyphens can be mistaken as subtraction attempts. Hyphens are not allowed in JavaScript names.
Reference:
JavaScript Style Guide[^]
   
v2
Comments
LovelyLittleBunny 20-Mar-20 17:52pm
   
thanks for the heads up on that but I altered the form-notice to formNotice (and fixed a few other names with dashes) and it didn't fix the problem. Do you think the problem could be with the email verification itself? The web address I'm trying to reach with that is "https://emailverification.whoisxmlapi.com/api/v1?apiKey=at_UCofjfbCk1ZmSANtzEy0pmapuM96v&emailAddress=fakemail@website.com" but I'm wondering if the concat is messing up the syntax for it.
MadMyche 20-Mar-20 18:25pm
   
That is where your browser's debugger (right click/inspect) comes into play- you can use the tab to see errors and network traffic amongst other things.
LovelyLittleBunny 20-Mar-20 21:05pm
   
I've no idea how it is that I didn't know about the debugger so thank you again lol. I think I see where the code is failing and I think I know why. If what I just read is correct then .getJSON method only works if the JSON file is on the local server and I'm trying to pull it from an external server.
LovelyLittleBunny 20-Mar-20 21:26pm
   
I feel so stupid now because the answer was so much simpler than what I had written. The email api I'm using gives fairly detailed descriptions and I missed it. They handle everything I just needed to send the info in the onsubmit function

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100