Javascript 填写必填字段后，如何允许提交表单？

我已经完成了带有即时字段验证的代码，但还希望在字段没有值时阻止表单提交。我已经设法阻止表单被提交，但是当我返回并提供一个值时，它仍然不允许它提交。知道我做错了什么吗

以下是HTML：

<form id="contactForm" action="https://formspree.io/xrggbejj" method="POST" onsubmit="return formValidation(contactForm);">

  <div class="row">

  <div class="col">
    <label for="fName">First Name</label>
  </div>

  <div class="col">
    <input type="text" id="fName" name="firstname" onblur="checkFirstName(firstName)" autofocus/>
    <img src="../images/alert-icon.png" class="alert" id="firstNameMsg" alt="alert icon" width="40" height="35"/>
  </div>
  </div> <!-- End of row -->

  <div class="row">

  <div class="col">
    <label for="lName">Last Name</label>
  </div>

  <div class="col">
    <input type="text" id="lName" name="lastname" onblur="checkLastName(lastName)"/>
    <img src="../images/alert-icon.png" class="alert" id="lastNameMsg" alt="alert icon" width="40" height="35"/>
  </div>
  </div> <!-- End of row -->

  <div class="row">

  <div class="col">
    <label for="subject">Questions and/or Comments</label>
  </div>

  <div class="col">
    <textarea id="subject" name="subject" onblur="checkSubject(subject)" style="height:200px"></textarea>
    <img src="../images/alert-icon.png" class="alert" id="subjectMsg" alt="alert icon" width="40" height="35"/>
  </div>
  </div> <!-- End of row -->

  <div class="row">
    <input type="submit" value="SEND" />
  </div> <!-- End of row -->
</form>

提交时确认联系表

function formValidation(contactForm) {

  if (firstName && lastName && subject !== true) {
    alert('Please fill out required fields.')
    event.preventDefault()
    return false;
  } else if (firstName && lastName && subject === true) {
    return true;
 }
}

---

既然你这么做了

if (firstName && lastName && subject !== true) {
  ...
}

 if (firstName.value === '') {
    alertStyle = document.getElementById('fName').style.border = '2px solid rgba(255, 6, 0)';
    alertImg = document.getElementById('firstNameMsg').style.display = 'inline-block';
    return false;

我想你希望这样做

if (firstName && lastName && subject !== true) {
  ...
}

 if (firstName.value === '') {
    alertStyle = document.getElementById('fName').style.border = '2px solid rgba(255, 6, 0)';
    alertImg = document.getElementById('firstNameMsg').style.display = 'inline-block';
    return false;

你会做这样的事吗

firstName = true

但是它实际上并没有给

名字分配任何内容。它只是返回真的

您可以有一个变量，如
isValid
和do
isValid=true
，而不是在
checkLastName（）等中返回true

然而，既然你这样做了

document.getElementById('lastNameMsg').style.display = 'none'

你可以

function formValidation(contactForm) {

  if (document.getElementById('lastNameMsg').style.display !== 'none') {
    alert('Please fill out required fields.')
    event.preventDefault()
    return false;
  } else if (document.getElementById('lastNameMsg').style.display === 'none') {
    return true;
 }
}


无论如何，有多种方法可以简化此过程，但希望这能让您继续：）

干杯。
firstName
、
lastName
和
subject
变量指向的是输入，而不是其中的实际值。您可以将函数修改为

    function formValidation(contactForm) {

      if (!firstName.value || !lastName.value || !subject.value) {
        alert('Please fill out required fields.')
        event.preventDefault()
        return false;
      } else {
        return true;
      }
    }

这里我使用了
运算符，当输入为空时，将其转换为
True
，如果任何输入为空，将计算第一种情况，否则函数将返回True