时间戳

首页 > 解决方案 > HTML 表单在表单上方打印警告文本但不会清除

javascript - HTML 表单在表单上方打印警告文本但不会清除

问题描述

我有一个表单，可以在点击提交按钮时验证提供的信息。如果信息不正确，它会在表单上方打印错误消息。我希望清除表单上方的警告消息以及字段，但它只清除字段。

function validateForm() {
document.getElementById("demo").innerHTML = "";
var warningText="";
var phoneno = /^\d{10}$/;

if(document.Registration.userName.value.length<8){
    warningText="<li>Username is required!</li>";
    document.getElementById("demo").innerHTML = warningText;}
if(document.Registration.psw.value.length<8){
    warningText=warningText+ "<li>Password must be at least 8 characters </li>"
    document.getElementById("demo").innerHTML = warningText;}
if(document.Registration.firstName.value.trim().length==0){
    warningText=warningText+ "<li>First name is required!</li>"
    document.getElementById("demo").innerHTML = warningText;}
if(document.Registration.lastName.value.trim().length==0){
    warningText=warningText+ "<li>Last name is required!</li>"
    document.getElementById("demo").innerHTML = warningText;}
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.Registration.email.value)){
    warningText=warningText+ "<li>Not a valid email!</li>"
    document.getElementById("demo").innerHTML = warningText;}
if(!document.Registration.usrtel.value.match(phoneno)){
    warningText=warningText+ "<li>Not valid phone number!</li>"
    document.getElementById("demo").innerHTML = warningText;}   
else {
    alert("Your registration has been processed.")}
}

</script>

</head>

<body>
<h2>Registration</h2>
<p id="demo"> </P>

<form id="Registration" name="Registration">
<table>
<tr><td>Username:</td> <td><input type="text" name="userName" required 
size="15" />(At least 8 characters)</td>
<tr><td>Password:</td> <td><input type="password" name="psw" pattern=".{8,}" 
required size="15"/>(At least 8 characters)</td>
<tr><td>First Name:</td> <td><input type="text" name="firstName" required 
size="15"/></td>
<tr><td>Last Name:</td> <td><input type="text" name="lastName" required 
size="15"/></td>
<tr><td>Date of Birth:</td> <td><input type="date" name="bday" required 
size="10"/></td>
<tr><td>Email:</td> <td><input type="email" name="email" size="15" required /> 
</td>
<tr><td>Phone Number:</td> <td><input type="tel" name="usrtel" 
maxlength="10" 
size="15"/>(Optional)<td>
</table>
<input type="button" onClick="validateForm()" value="Submit"/>
<input type="reset" onClick= "reset" value="Clear"/>
</P>
</form>
</body>
</html>

标签： javascripthtml

解决方案

单击程序中的重置按钮会重置表单值（https://www.w3schools.com/tags/att_input_type_reset.asp），但它对 ID 为“demo”的段落的 innerHTML 属性没有任何作用。代替onclick="reset"，您可以在脚本中创建一个简单的函数来重置 innerHTML 属性：

function clearFormHTML() {document.getElementById("demo").innerHTML="";}

然后，

<input type="reset" onclick="clearFormHTML()" value="Clear"/>

此外，您似乎还有一个额外的结束</P>标签。

推荐阅读