我知道有很多关于Javascript表单验证的帖子，但在我的情况下找不到任何帮助。
我有这样的形式（重新下面的图像）.我没有访问HTML或CSS，只能添加JS到页面.'原始'形式只有输入字段：Email，Password & Confirm Password.我已经用JS添加了输入字段：名字和姓氏. x1c 0d1x
我试图做什么-当一个人点击按钮，它只是验证字段不为空和密码匹配&如果字段有错误，那么它会显示红色警报块（可见在我的形象以上）&有一个列表项添加为每个字段失踪.例如-如果名字是失踪，它会添加<li>First Name is a required field</li>到块.如果两个名字&姓氏丢失，则将添加<li>First Name is a required field</li><li>Last Name is a required field</li>等。
如果验证全部通过-那么它会将firstname和lastname写入本地存储并在实际（隐藏）提交按钮上执行单击操作。显然，如果验证失败-它会显示alert块（带有错误列表项）并不写入本地存储或执行单击操作。
这是我目前所有的JS代码。很明显，2个新的输入字段正在被添加。它正在写入本地存储。只是在验证中挣扎。

<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 Alert\Error 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>