如果表單驗證在javascript中成功，如何提交表單

我有一個簡單的表單，我在 javascript 中進行一些驗證，默認情況下會阻止提交按鈕以檢查是否完成了所有驗證，表單如下所示：

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');

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

  checkInputs();
});

function checkInputs() {
  // trim to remove the whitespaces
  const usernameValue = username.value.trim();
  const emailValue = email.value.trim();
  const passwordValue = password.value.trim();

  if (usernameValue === '') {
    setErrorFor(username, 'Full name cannot be blank');
  } else {
    setSuccessFor(username);
  }

  if (emailValue === '') {
    setErrorFor(email, 'Email cannot be blank');
  } else if (!isEmail(emailValue)) {
    setErrorFor(email, 'Not a valid email');
  } else {
    setSuccessFor(email);
  }

  if (passwordValue === '') {
    setErrorFor(password, 'Roll number cannot be blank');
  } else if (passwordValue.length < 10) {
    setErrorFor(password, 'Roll number must be 10 digits');
  } else {
    setSuccessFor(password);
  }


}

function setErrorFor(input, message) {
  const formControl = input.parentElement;
  const small = formControl.querySelector('small');
  formControl.className = 'form-control error';
  small.innerText = message;
}

function setSuccessFor(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}

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);
}

<form id="form" class="form" method="post" action="">
  <div class="form-control">
    <label for="username">Full Name</label>
    <input type="text" placeholder="Full Name" id="username" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>Error message</small>
  </div>
  <div class="form-control">
    <label for="username">Email</label>
    <input type="email" placeholder="Email" id="email" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>Error message</small>
  </div>
  <div class="form-control">
    <label for="username">Roll Number</label>
    <input type="text" maxlength="10" placeholder="Roll Number" id="password" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>Error message</small>
  </div>

  <button type="submit">Submit</button>
</form>

驗證作業正常，如果所有驗證都成功，則表單未提交的問題，誰能告訴我如何完成此操作，在此先感謝

uj5u.com熱心網友回復：

沒有被提交，因為e.preventDefault();. 所以e.preventDefault();當表單無效時執行，否則不需要。

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');

form.addEventListener('submit', e => {
  if(!checkInputs())
    e.preventDefault();
});

function checkInputs() {
  // trim to remove the whitespaces
  const usernameValue = username.value.trim();
  const emailValue = email.value.trim();
  const passwordValue = password.value.trim();
  let error =true;
  if (usernameValue === '') {
    setErrorFor(username, 'Full name cannot be blank');
    error =false;
  } else {
    setSuccessFor(username);
  }

  if (emailValue === '') {
    setErrorFor(email, 'Email cannot be blank');
     error =false;
  } else if (!isEmail(emailValue)) {
    setErrorFor(email, 'Not a valid email');
     error =false;
  } else {
    setSuccessFor(email);
  }

  if (passwordValue === '') {
    setErrorFor(password, 'Roll number cannot be blank');
     error =false;
  } else if (passwordValue.length < 10) {
    setErrorFor(password, 'Roll number must be 10 digits');
     error =false;
  } else {
    setSuccessFor(password);
  }
  return error;

}

function setErrorFor(input, message) {
  const formControl = input.parentElement;
  const small = formControl.querySelector('small');
  formControl.className = 'form-control error';
  small.innerText = message;
}

function setSuccessFor(input) {
  const formControl = input.parentElement;
  formControl.className = 'form-control success';
}

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);
}

<form id="form" class="form" method="post" action="">
  <div class="form-control">
    <label for="username">Full Name</label>
    <input type="text" placeholder="Full Name" id="username" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>Error message</small>
  </div>
  <div class="form-control">
    <label for="username">Email</label>
    <input type="email" placeholder="Email" id="email" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>Error message</small>
  </div>
  <div class="form-control">
    <label for="username">Roll Number</label>
    <input type="text" maxlength="10" placeholder="Roll Number" id="password" />
    <i class="fas fa-check-circle"></i>
    <i class="fas fa-exclamation-circle"></i>
    <small>Error message</small>
  </div>

  <button type="submit">Submit</button>
</form>

標籤：javascripthtml形式验证

上一篇：谷歌應用腳??本setValues()運行完美，直到遇到資料驗證錯誤

下一篇：Java驗證車輛登記