Javascript 在表单提交上创建段落

我是新手。我正在制作一个带有验证的表单，在提交和验证时创建一个p标记。我似乎无法让它工作，因为网站在没有显示错误时会重新加载，而不是用输入创建段落。似乎我已经尝试了所有建议的解决方案，但没有什么对我有效。我希望有人知道问题是什么

HTML:

JavaScript表单验证
申请表
费尔南姆
埃弗特纳姆
电子邮件地址

JS:

//定义用于显示错误消息的函数
函数打印错误（elemId、hintMsg）{
document.getElementById（elemId.innerHTML=hintMsg；
}
//定义用于验证表单的函数
函数validateForm（）{
//检索表单元素的值
var fname=document.contactForm.fname.value；
var lname=document.contactForm.lname.value；
var email=document.contactForm.email.value；
//使用默认值定义错误变量
var fnameErr=lnameErr=emailErr=true；
//验证名称
如果（fname==“”）{
打印错误（“fnameErr”，“请输入您的姓名”）；
}否则{
var regex=/^[a-zA-Z\s]+$/；
if（正则表达式测试（fname）==false）{
printError（“fnameErr”，“请输入有效名称”）；
}否则{
打印错误（“fnameErr”和“）；
fnameErr=false；
}
}
如果（lname==“”）{
打印错误（“lnameErr”，“请输入您的姓名”）；
}否则{
var regex=/^[a-zA-Z\s]+$/；
if（正则表达式测试（lname）==false）{
打印错误（“lnameErr”，“请输入有效名称”）；
}否则{
打印错误（“lnameErr”、“lnameErr”）；
lnameErr=false；
}
}
//验证电子邮件地址
如果（电子邮件==“”）{
打印错误（“emailErr”，“请输入您的电子邮件地址”）；
}否则{
//用于基本电子邮件验证的正则表达式
var regex=/^\S+@\S+\.\S+$/；
if（正则表达式测试（电子邮件）==false）{
打印错误（“emailErr”，“请输入有效的电子邮件地址”）；
}否则{
打印错误（“emailErr”和“）；
emailErr=false；
}
}
//如果有任何错误，请阻止提交表单
if（（fnameErr | | lnameErr | | emailErr）==true）{
返回false；
}否则{
document.getElementById（“add”）.onclick=function（）{
var p=document.createElement（“p”）；
var fname=document.getElementsByName（“fname”）.value；
var lname=document.getElementsByName（“lname”）.value；
var email=document.getElementsByName（“电子邮件”）.value；
p、 innerHTML=fname+“
”+lname+“
”+电子邮件；
document.getElementById（“列表”）.appendChild（p）；
};
}
};

您可以使用checkValidity（）防止错误表单提交，如下所示

<button type="submit" formaction="if(this.form.checkValidity()){this.form.submit();} else {alert('Not valid!');}">Submit</button>

提交

---

将我的警报（）替换为您想到的任何内容。

您好，您需要

preventDefault（）

表单的操作：。否则，表单的默认操作将是根据操作属性值（如果给定）提交，或者如果给定，则“无处提交”not@St3an这是可行的，但它仍然没有创建p元素，知道有什么问题吗？

document.getElementById（“add”）.onclick=function（）{…

我看不到任何具有“在您的表单中添加'id…@st3糟糕的是，输入提交应该有类添加，测试了它并添加了一个段落，但值未定义。您能编辑您的答案并随后更正html吗请（…

add

…）？鉴于当前的代码，我看不到

document.getElementsByName（“…”）有任何问题。”.value；

零件。。。

// Defining a function to display error message
function printError(elemId, hintMsg) {
    document.getElementById(elemId).innerHTML = hintMsg;
}

// Defining a function to validate form 
function validateForm() {
    // Retrieving the values of form elements 
    var fname = document.contactForm.fname.value;
    var lname = document.contactForm.lname.value;
    var email = document.contactForm.email.value;
    
    // Defining error variables with a default value
    var fnameErr = lnameErr = emailErr = true;
    
    // Validate name
    if(fname == "") {
        printError("fnameErr", "Please enter your name");
    } else {
        var regex = /^[a-zA-Z\s]+$/;                
        if(regex.test(fname) === false) {
            printError("fnameErr", "Please enter a valid name");
        } else {
            printError("fnameErr", "");
            fnameErr = false;
        }
    }

    if(lname == "") {
        printError("lnameErr", "Please enter your name");
    } else {
        var regex = /^[a-zA-Z\s]+$/;                
        if(regex.test(lname) === false) {
            printError("lnameErr", "Please enter a valid name");
        } else {
            printError("lnameErr", "");
            lnameErr = false;
        }
    }
    
    // Validate email address
    if(email == "") {
        printError("emailErr", "Please enter your email address");
    } else {
        // Regular expression for basic email validation
        var regex = /^\S+@\S+\.\S+$/;
        if(regex.test(email) === false) {
            printError("emailErr", "Please enter a valid email address");
        } else{
            printError("emailErr", "");
            emailErr = false;
        }
    }
    
    // Prevent the form from being submitted if there are any errors
    if((fnameErr || lnameErr || emailErr) == true) {
       return false;
    } else {
            document.getElementById("add").onclick  = function() {
                var p = document.createElement("p");
                var fname = document.getElementsByName("fname").value; 
                var lname = document.getElementsByName("lname").value;
                var email = document.getElementsByName("email").value;
                p.innerHTML = fname + "<br />" + lname + "<br />" + email;
                document.getElementById("list").appendChild(p);
        };
    }
};

<button type="submit" formaction="if(this.form.checkValidity()){this.form.submit();} else {alert('Not valid!');}">Submit</button>