How do I alter a paragraph with javascript?

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.

Tags: Javascript, HTML, Validation, Form