Javascript form validation with errors in alert block

I know there’s dozens of postings about Javascript form validation, but couldn’t find any to help me in my situation.

I have this form (re image below). i don’t have access to the HTML or CSS and can only add JS to the page.
The ‘original’ form only had the input fields: Email, Password & Confirm Password.
I’ve used JS to add the input fields: First Name & Last Name.
enter image description here

What im trying to do – When a person clicks the button it just validates the fields aren’t null and passwords match & if the fields have errors then it will show the red alert block (visible in my image above) & have a list item added for each field missing.
for example – if first name is missing it will add <li>First Name is a required field</li> to the block. If both first name & last name are missing then it will add <li>First Name is a required field</li><li>Last Name is a required field</li> etc.

If the validation all passes – then it writes the firstname & lastname to localstorage & performs a click action on the actual (hidden) submit button.
And obviously if validation fails – it shows alert block (with error list items) & doesn’t write to local storage or perform click action.

Here’s all the JS code i currently have.
Obviously the 2 new input fields are being added. Its writing to localstorage. Just struggling with the validation.

<script>
    $(document).ready(function () {
        function insertBefore(referenceNode, newNode) {
            referenceNode.parentNode.insertBefore(newNode, referenceNode);
        }

        //Change the heading text
        var title = document.getElementById("ContentContainer_MainContent_MainContent_RegisterLocalFormHeading").parentNode.querySelector(".xrm-attribute-value");
        title.innerText = "Register for a CEDA account";

        //Add the firstname & lastname fields above email field.
        var email = document.getElementById("ContentContainer_MainContent_MainContent_ShowEmail");
        var lastname = document.createElement('div');
        lastname.id = "LastName";
        lastname.classList.add("form-group");
        lastname.innerHTML = "<label class='col-sm-4 control-label required' for='LastNameTextBox'><span id='ContentContainer_MainContent_MainContent_LastNameLabel'><span class='xrm-editable-text xrm-attribute'><span class='xrm-attribute-value'>Last Name</span></span></span></label><div class='col-sm-8'><input name='ctl00$ctl00$ContentContainer$MainContent$MainContent$LastNameTextBox' type='text' autocomplete='off' id='LastNameTextBox' class='form-control' aria-required='true'></div></div>";
        insertBefore(email, lastname)
        var firstname = document.createElement('div');
        firstname.id = "FirstName";
        firstname.classList.add("form-group");
        firstname.innerHTML = "<label class='col-sm-4 control-label required' for='FirstNameTextBox'><span id='ContentContainer_MainContent_MainContent_FirstNameLabel'><span class='xrm-editable-text xrm-attribute'><span class='xrm-attribute-value'>First Name</span></span></span></label><div class='col-sm-8'><input name='ctl00$ctl00$ContentContainer$MainContent$MainContent$FirstNameTextBox' type='text' autocomplete='off' id='FirstNameTextBox' class='form-control' aria-required='true'></div></div>";
        insertBefore(lastname, firstname);

        //Add our fake Register button & hide the actual button
        var regButton = document.createElement('input');
        regButton.id = "customSubmitButton";
        regButton.classList.add("btn", "btn-success");
        regButton.setAttribute("name", "ctl00$ctl00$ContentContainer$MainContent$MainContent$customSubmitButton");
        regButton.setAttribute("value", "Register");
        insertBefore(document.getElementById("SubmitButton"), regButton);
        var submitButton = document.getElementById("SubmitButton");
        submitButton.style.visibility = "hidden";

        //Create our AlertError Box
        var errorBox = document.createElement('div');
        errorBox.id = "validationSummary";
        errorBox.classList.add("listStyleTypeNone", "alert", "alert-block", "alert-danger");
        errorBox.innerHTML = "<ul role='presentation'></ul>";
        var heading = document.getElementsByClassName("login-heading-section")[0];
        heading.parentNode.insertBefore(errorBox, heading.nextSibling);
        errorBox.style.display = "none";

        regButton.onclick = saveData;
        function saveData() {
            validateForm();
            errorBox.style.display = "block";


            localStorage.setItem("CEDAFName", document.getElementById("FirstNameTextBox").value);
            localStorage.setItem("CEDALName", document.getElementById("LastNameTextBox").value);
            //$("#SubmitButton").click();
        }

        function validateForm() {
            var errfirstname, errlastname, errEmail, errPass1, errPass2;
            if ($("#FirstNameTextBox").valid() == false) {
                errfirstname = "<li>First Name is a required field</li>";
            }
            if ($("#LastNameTextBox").valid() == false) {
                errlastname = "<li>Last Name is a required field</li>"
            }

        }

    });
</script>