如何使我的"Clear"按钮重置表单和错误消息？

Question

所以，我目前正在学习IT和网络开发和设计是它的一部分，我遇到了各种各样的障碍围绕着"按钮，该按钮被设置为"重置"类。因为我不确定是否需要向表单添加JavaScript函数以及如何做到这一点。我已经为"提交"创建了一个事件监听器函数。按钮，我需要为"Clear"实现的JavaScript;按钮唤起的重置功能和清除表单回到其原始状态大致相同?占位符信息需要留在字段中，这纯粹是重置按钮需要工作和清除出现的表单和错误消息。

<main>
<h1>Registration Form</h1>
<p>Please complete the following form to register for an account on our website.</p>

<div class="container">
<form id="form" action="/">

<div class="input-control">
<label for="username">Username</label>
<input id="username" name="username" type="text" placeholder="Username">
<div class="error"></div>
</div>
<div class="input-control">
<label for="email">Email</label>
<input id="email" name="email" type="text" placeholder="Email">
<div class="error"></div>
</div>
<div class="input-control">
<label for="password">Password</label>
<input id="password"name="password" type="password" placeholder="Password">
<div class="error"></div>
</div>
<div class="input-control">
<label for="password2">Confirm Password</label>
<input id="password2"name="password2" type="password" placeholder="Confirm Password">
<div class="error"></div>
</div>
<div class="input-control">
<label for="firstname">First Name</label>
<input type="text" id="firstname" placeholder="Joe">
<div class="error"></div>
</div>
<div class="input-control">
<label for="surname">Surname</label>
<input type="text" id="surname" placeholder="Smith">
<div class="error"></div>
</div>
<div class="input-control">
<label for="gender">Gender</label>
<select name="gender">
<option value="Please select">Please Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Them/They">Them/They</option>
<option value="Rather Not Say">Rather Not Say</option>
</select>
<div class="error"></div>
</div>
<div class="input-control">
<label for="dateofbirth">Date of Birth</label>
<input type="date" name="datepicker" min="1900-01-01" max="2099-01-01" id="dateOfBirth" placeholder="Enter password again">
<div class="error"></div>
</div>
<div class="input-control">
<label for="address">Address</label>
<input type="text" id="address" placeholder="1 Main Street">
<div class="error"></div>
</div>
<div class="input-control">
<label for="suburb">Suburb</label>
<input type="text" id="suburb" placeholder="Sydney">
<div class="error"></div>
</div>
<div class="input-control">
<label for="postcode">Postcode</label>
<input type="text" id="postcode" name="zip" pattern="[0-9]*" placeholder="2000">
<div class="error"></div>
</div>
<div class="input-control">
<label for="state">State</label>
<select name="state">
<option value="ACT">ACT</option>
<option value="NSW" selected>NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
</select>
<div class="error"></div>
</div>
<div class="input-control">
<label for="phonenumber">Phone Number</label>
<input type="tel" id="phonenumber" placeholder="Enter Phone Number">
<div class="error"></div>
<div>
<button type="submit" class="submit" name="submit">Register</button>
<button value="Reset" class="reset" >Clear</button>
</div>
</div>
</form>


<p>Already a member? <a href="LogIn.html">Log In</a>
</p>
</main>

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
const firstname = document.getElementById('firstname');
const surname = document.getElementById('surname');
const address = document.getElementById('address');
const suburb = document.getElementById('suburb');
const postcode = document.getElementById('postcode');
const phonenumber = document.getElementById('phonenumber');
form.addEventListener('submit', e => {
e.preventDefault();
validateInputs();
});
const setError = (element, message) => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = message;
inputControl.classList.add('error');
inputControl.classList.remove('success')
}
const setSuccess = element => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = '';
inputControl.classList.add('success');
inputControl.classList.remove('error');
};
const isValidEmail = email => {
const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
const isValidUsername = username => {
const re = /^[A-Za-z0-9 ]+$/;
return re.test(String(username).length <6)
}
const isValidFirstname = firstname => {
const re = /^[A-Za-z0-9 ]+$/;
return re.test(String(firstname).length <2)
}
const isValidSurname = surname => {
const re = /^[A-Za-z0-9 ]+$/;
return re.test(String(surname).length <2)
}
const validateInputs = () => {
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
const firstnameValue = firstname.value.trim()
const surnameValue = surname.value.trim()
const addressValue = address.value.trim()
const suburbValue = suburb.value.trim()
const postcodeValue = postcode.value.trim()
const phonenumberValue = phonenumber.value.trim()

if(usernameValue === '') {
setError(username, 'Username is required');
} else if (!isValidUsername(usernameValue)) {
setError(username, 'Username can not contain special characters or be less than 8 characters long')
} else {
setSuccess(username);
}

if(emailValue === '') {
setError(email, 'Email is required');
} else if (!isValidEmail(emailValue)) {
setError(email, 'Provide a valid email address');
} else {
setSuccess(email);
}
if(passwordValue === '') {
setError(password, 'Password is required');
} else if (passwordValue.length < 8 ) {
setError(password, 'Password must be at least 8 character.')
} else {
setSuccess(password);
}
if(password2Value === '') {
setError(password2, 'Please confirm your password');
} else if (password2Value !== passwordValue) {
setError(password2, "Passwords doesn't match");
} else {
setSuccess(password2);
}

if(firstnameValue === '') {
setError(firstname, 'Please enter your First Name');
} else if (!isValidFirstname(firstnameValue)) {
setError(firstname, 'Username can not contain special characters or be less than 2 characters long')
} else {
setSuccess(firstname);
}

if(surnameValue === '') {
setError(surname, 'Please enter your Surname');
} else if (!isValidSurname(surnameValue)) {
setError(surname, 'Username can not contain special characters or be less than 2 characters long')
} else {
setSuccess(surname);
}

if(addressValue === '') {
setError(address, 'Please enter your Address');
} else if(addressValue.length < 20) {
setError(address, 'Address must be longer then 20 charcters');
} else {
setSuccess(address);
}

if(suburbValue === '') {
setError(suburb, 'Please enter your Suburb');
} else if(suburbValue.length < 5) {
setError(address, 'Suburb must be longer then 5 charcters');
} else {
setSuccess(suburb);
}

if(postcodeValue === '') {
setError(postcode, 'Please enter your Postcode');
} else if(isNaN(postcodeValue.length > 4 )) {
setError(postcode, 'Postcode must be 4 numbers')
} else {
setSuccess(postcode);
}

if(phonenumberValue === '') {
setError(phonenumber, 'Please enter your Phone Number');
} else if(isNaN(phonenumberValue.length < 10)) {
setError(address, 'Phone Number must be less than 10 numbers');
} else {
setSuccess(phonenumber);
}
};

我想确保我共享所需的代码…如果你想的话，我可以添加CSS，但我认为这已经足够了，因为这是我的问题所在。

我在谷歌上搜索过，在Stack和其他网站上读过很多不同的东西，我还不熟悉jQuery，因为我还在学习，还没有冒险去那里。我曾经经历过一次完全丢失的数据，当我实现了一个函数的"Clear"按钮，我觉得这会导致与"提交"的冲突。按钮代码，但不确定。否则，当前状态是唯一允许按钮按预期显示的状态，遗憾的是，按钮根本没有响应。

Answer 1

document.getElementById("form").reset();

这一行足以重置表单。

Answer 2

在js文件中添加form.reset，如下所示。创建函数，然后这样做…并在需要的地方应用它。

function reset(){
form.reset();
});