Как изменить абзац с помощью 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>

Что я уже пробовал:

самый распространенный совет, который я нашел для этой проблемы, - это изменить тип кнопки с "отправить" на "кнопка", и хотя это остановило ее обновление, она также сделала кнопку полностью неработоспособной.

Мне также дали совет поместить функцию внутри $( document ).ready(function ()), но я не нашел ничего, что могло бы подсказать правильный синтаксис для этого, мне пришлось сделать свое лучшее предположение.

---