将 javascript 文件添加到 html 后，我无法提交表单

问题描述 投票：0回答：1

The output when submitted 我创建了一个注册页面，但在填写表单并通过附加的 .js 文件验证其正确性后，我无法提交表单。另外，我无法使表单填写错误时显示的错误消息在更正后消失，除非表单已提交（即仅在单击提交按钮时才显示成功标记）

我创建了一个接受输入的页面，并在提交表单之前使用 JavaScript 来验证表单。但在 javascript 验证表单后，它拒绝将其提交给表单附加的操作。我还尝试让我使用 javascript 设置的错误消息在填写正确的数据后消失，但我无法做到这一点。

如果我可以将日期验证器添加到 .js 文件中以检查日期是否为有效日期。尝试添加但无济于事。

const form = document.getElementById('form');
const firstname = document.getElementById('firstname');
const lastname = document.getElementById('lastname');
const email = document.getElementById('email');
const dob = document.getElementById('dob');
const phone = document.getElementById('phone');
const username = document.getElementById('username');
const password = document.getElementById('password');
const confpassword = document.getElementById('confpassword');

form.addEventListener('submit', (e) => {
e.preventDefault();

checkInputs();
});

function checkInputs(){
//to get values from inputs
const firstnameValue = firstname.value.trim();
const lastnameValue = lastname.value.trim();
const emailValue = email.value.trim();
const dobValue = dob.value.trim();
const phoneValue = phone.value.trim();
const usernameValue = username.value.trim();
const passwordValue = password.value.trim();
const confpasswordValue = confpassword.value.trim();

if(firstnameValue === '') {
setErrorFor(firstname, 'Please enter your name');
} else {
setSuccessFor(firstname);
}

if(lastnameValue === '') {
setErrorFor(lastname, 'Please enter your name');
} else {
setSuccessFor(lastname);
}

if (dobValue === '') {
setErrorFor(dob, 'Please enter your date of birth');
// } else if (!isValidDate(dobValue)) {
// setErrorFor(dob, 'Please enter a valid date in the format YYYY-MM-DD');
// } else if (isAgeLessThan16(dobValue)) {
// setErrorFor(dob, 'You must be 16 years or older');
} else {
setSuccessFor(dob);
}

if(phoneValue === '') {
setErrorFor(phone, 'Please enter your phone number');
} else if(phoneValue.length < 11) {
setErrorFor(phone, 'Please enter your 11 digits number');
}else {
setSuccessFor(phone);
}

if(usernameValue === '') {
setErrorFor(username, 'Please choose a username');
} else {
setSuccessFor(username);
}

if(passwordValue === '') {
setErrorFor(password, 'Please enter a strong password');
} else if(passwordValue.length < 8) {
setErrorFor(password, 'Your Password must be at least 8 characters');
// } else if(!isStrong(passwordValue)) {
// setErrorFor(password, 'Include letters(Upper and lower cases), numbers and special characters');
} else {
setSuccessFor(password);
}

if (confpasswordValue === '') {
setErrorFor(confpassword, 'Please enter your password');
} else if(confpasswordValue !== passwordValue){
setErrorFor(confpassword, 'Password not match!');
} else {
setSuccessFor(confpassword);
}

if(emailValue === '') {
setErrorFor(email, 'Please fill in your Email address');
} else if(!isEmail(emailValue)) {
setErrorFor(email, 'Please enter a valid Email address');
} else{
setSuccessFor(email);
}

}

function setErrorFor(input, message) {
const formControl = input.parentElement; // .input-part
const small = formControl.querySelector('small');

//add error message inside small
small.innerText = message;

//add form control class
formControl.className = 'input-part error';
return false;
}

function setSuccessFor(input) {
formControl = input.parentElement;
formControl.className = 'input-part success';
return true;
}

function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\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,}))$/.test(email);
}
*{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}

body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: auto;
padding: 20px;
background-color: white;
background-size: cover;
}

.logo {
position: absolute;
transform: translateY(-500px);
display: flex;
justify-content: center;
align-items: center;
width: 300px;
max-width: 300px;
}

.logo img {
width: 100%;
}

.signup {
overflow: hidden;
background-color: whitesmoke;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(172, 84, 84, 0.775);
width: 500px;
max-width: 100%;
margin-top: 200px;
}

.signup a {
text-decoration: none;
color: black;
}

.signup a:hover {
text-decoration: underline;
}

.header {
background-color: antiquewhite;
text-transform: uppercase;
font-size: 25px;
font-weight: bold;
padding: 20px 40px;
border-bottom: 1px solid #ffffff;
}

.form {
padding: 30px 40px;
}

.input-part {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}


.input-part label {
display: inline-block;
margin-bottom: 5px;
}

.input-part input {
border: 2px solid rgb(0, 0, 0);
display: block;
width: 100%;
padding: 10px;
font-size: 15px;
font-family: inherit;
background: transparent;
outline: none;
border-radius: 7px;
}

.input-part.success input {
border-color: #2fcd71;
}

.input-part.success i.fa-check-circle {
visibility: visible;
color: #2fcd71;
}

.input-part.error input {
border-color: red;
animation: shake 0.14s 3;
}

.input-part.error i.fa-exclamation-circle {
visibility: visible;
color: red;
animation: shake 0.14s 3;
}

.input-part.error small {
visibility: visible;
color: red;
animation: shake 0.14s 3;
}

@keyframes shake {
0%,100% {translate: 0;}
25% {translate: 8px 0;}
75% {translate: -8px 0;}
}

.btn {
width: 100%;
margin: 25x auto;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(95, 95, 223);
color: white;
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
border: none;
border-radius: 5px;
padding: 15px 16px;
cursor: pointer;
outline: none;
}

.btn:active {
transform: scale(95%);
}

.input-part i {
visibility: hidden;
position: absolute;
top: 35px;
right: 10px;
}

.input-part small {
visibility: hidden;
position: absolute;
bottom: 0;
left: 0;
}

.login {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 25px;
margin-top: -5px;
font-size: 13px;
}
<!DOCTYPE html>
<!-- removed -->
<body>

<div class="logo">
<a href="../index.html"><img src="../images/icons/_logo.png" alt=""></a>
</div>

<div class="signup">
<div class="header">signup</div>

<form action="signup.php" class="form" id="form" method="post">

<div class="input-part ">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="e.g Yusuf">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>
<div class="input-part">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="e.g Olanrewaju">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>
<div class="input-part">
<label for="email">Email Address</label>
<input type="email" name="email" id="email" placeholder="[email protected]">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>
<div class="input-part">
<label for="dob">Birthday</label>
<input type="text" maxlength="10" id="dob" name="dob" placeholder="Enter your Birthday (YYYY/MM/DD)">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small id="dobError">Error</small>

<script defer src="date.js"></script>

</div>
<div class="input-part">
<label for="phone">Phone Number</label>
<input type="text" id="phone" maxlength="11" name="phone" placeholder="Enter Phone Number" oninput="validateNumericInput(this)">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>

<script defer src="maxlenght.js"></script>
<script defer src="phone.js"></script>

</div>
<div class="input-part">
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="Choose a Username">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>
<div class="input-part">
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="Enter a strong Password" oninput="checkPasswordStrength(this)">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small id="passwordStrength">Error</small>
</div>
<div class="input-part">
<label for="confpassword">Confirm Password</label>
<input type="password" name="confpassword" id="confpassword" placeholder="Re-enter Password">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error</small>
</div>

<button class="btn" type="submit" >Signup</button>

</form>

<div class="login">
 <span>Have an account?</span> <a href="../index.html">Login</a>
</div>
</div>
</body>
</html>

javascript html forms validation form-submit
1个回答
0
投票

我建议您使用内置的输入验证。如果表单字段被测试为无效，它将显示类名称 

invalid
。当您再次输入时，当字段有效时，类名将被删除。

最后让表单提交。只要必填字段无效，就不会提交。

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  console.log('submit');
});

document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
  e.target.value = e.target.value.trim();
  if (!e.target.validity.valid) {
    e.target.classList.add('invalid');
  }
}, true);

document.forms.form01.addEventListener('input', e => {
  if (e.target.name == 'password') {
    e.target.form.confpassword.pattern = e.target.value;
  }
  if (e.target.validity.valid) {
    e.target.classList.remove('invalid');
  }
}, true);
* {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: auto;
  padding: 20px;
  background-color: white;
  background-size: cover;
}

.logo {
  position: absolute;
  transform: translateY(-500px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  max-width: 300px;
}

.logo img {
  width: 100%;
}

.signup {
  overflow: hidden;
  background-color: whitesmoke;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(172, 84, 84, 0.775);
  width: 500px;
  max-width: 100%;
  margin-top: 0px;
}

.signup a {
  text-decoration: none;
  color: black;
}

.signup a:hover {
  text-decoration: underline;
}

.header {
  background-color: antiquewhite;
  text-transform: uppercase;
  font-size: 25px;
  font-weight: bold;
  padding: 20px 40px;
  border-bottom: 1px solid #ffffff;
}

.form {
  padding: 30px 40px;
}

.input-part {
  margin-bottom: 10px;
  padding-bottom: 20px;
  position: relative;
}

.input-part label {
  display: inline-block;
  margin-bottom: 5px;
}

.input-part input {
  border: 2px solid rgb(0, 0, 0);
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 15px;
  font-family: inherit;
  background: transparent;
  outline: none;
  border-radius: 7px;
}

input:valid {
  border-color: #2fcd71;
}

.input-part.success i.fa-check-circle {
  visibility: visible;
  color: #2fcd71;
}

input.invalid {
  border-color: red;
  animation: shake 0.14s 3;
}

.input-part.error i.fa-exclamation-circle {
  visibility: visible;
  color: red;
  animation: shake 0.14s 3;
}

input.invalid~small {
  visibility: visible;
  color: red;
  animation: shake 0.14s 3;
}

@keyframes shake {
  0%,
  100% {
    translate: 0;
  }
  25% {
    translate: 8px 0;
  }
  75% {
    translate: -8px 0;
  }
}

.btn {
  width: 100%;
  margin: 25x auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(95, 95, 223);
  color: white;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
  padding: 15px 16px;
  cursor: pointer;
  outline: none;
}

.btn:active {
  transform: scale(95%);
}

.input-part i {
  visibility: hidden;
  position: absolute;
  top: 35px;
  right: 10px;
}

.input-part small {
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
}

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 25px;
  margin-top: -5px;
  font-size: 13px;
}
<div class="signup">
  <div class="header">signup</div>

  <form action="signup.php" class="form" name="form01" method="post">

    <div class="input-part ">
      <label for="firstname">First Name</label>
      <input type="text" name="firstname" id="firstname" placeholder="e.g Yusuf" required pattern="\w{2,100}" title="Please enter your name">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error</small>
    </div>
    <div class="input-part">
      <label for="lastname">Last Name</label>
      <input type="text" name="lastname" id="lastname" placeholder="e.g Olanrewaju" required pattern="\w{2,100}" title="Please enter your name">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error</small>
    </div>
    <div class="input-part">
      <label for="email">Email Address</label>
      <input type="email" name="email" id="email" placeholder="[email protected]" required pattern="[a-z0-9._%+\-]+@[a-z0-9.\-]+\.[a-z]{2,}$" title="Please enter a valid email">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error</small>
    </div>
    <div class="input-part">
      <label for="dob">Birthday</label>
      <input type="date" maxlength="10" id="dob" name="dob" placeholder="Enter your Birthday (YYYY/MM/DD)" title="Please enter your date of birth">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small id="dobError">Error</small>

      <script defer src="date.js"></script>

    </div>
    <div class="input-part">
      <label for="phone">Phone Number</label>
      <input type="text" id="phone" name="phone" placeholder="Enter Phone Number" required pattern="\d{11}" title="Please enter your 11 digits number">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error</small>
    </div>
    <div class="input-part">
      <label for="username">Username</label>
      <input type="text" name="username" id="username" placeholder="Choose a Username" required pattern="\w{4,100}" title="Please choose a username">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error</small>
    </div>
    <div class="input-part">
      <label for="password">Password</label>
      <input type="password" name="password" placeholder="Enter a strong Password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Please enter your password">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small id="passwordStrength">Error</small>
    </div>
    <div class="input-part">
      <label for="confpassword">Confirm Password</label>
      <input type="password" name="confpassword" id="confpassword" placeholder="Re-enter Password" required pattern="" title="Please repeate you password">
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error</small>
    </div>

    <button class="btn" type="submit">Signup</button>

  </form>

  <div class="login">
    <span>Have an account?</span> <a href="../index.html">Login</a>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.