完成必填字段后,如何允许提交表单?

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

这是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>

这是JavaScript:

联系表单字段验证

var alertStyle;
var alertImg;
const firstName = document.forms['contactForm']['fName'];
const lastName = document.forms['contactForm']['lName'];
const subject = document.forms['contactForm']['subject'];

function checkFirstName(firstName) {

  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;
  } else if (firstName.value !== '') {
    alertStyle = document.getElementById('fName').style.border = '1px solid #ccc';
   alertImg = document.getElementById('firstNameMsg').style.display = 'none';
   return true;
 }
}

function checkLastName(lastName) {

  if (lastName.value === '') {
    alertStyle = document.getElementById('lName').style.border = '2px solid rgba(255,0)';
    alertImg = document.getElementById('lastNameMsg').style.display = 'inline-block';
    return false;
  } else if (lastName.value !== '') {
    alertStyle = document.getElementById('lName').style.border = '1px solid #ccc';
    alertImg = document.getElementById('lastNameMsg').style.display = 'none';
    return true;
 }
}

function checkSubject(subject) {

  if (subject.value === '') {
    alertStyle = document.getElementById('subject').style.border = '2px solid rgba(255,0)';
    alertImg = document.getElementById('subjectMsg').style.display = 'inline-block';
    return false;
  } else if (firstName.value !== '') {
    alertStyle = document.getElementById('subject').style.border = '1px solid #ccc';
    alertImg = document.getElementById('subjectMsg').style.display = 'none';
    return true;
}}

提交时联系表单验证

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;
 }
}
chen123321bin 回答:完成必填字段后,如何允许提交表单?

变量firstNamelastNamesubject指向输入,而不是它们内部的实际值。您可以将功能修改为

    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。>

,

因为您正在这样做

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

但是它实际上并没有为firstName分配任何内容。它只是返回true。

您可以使用isValid之类的变量并执行isValid = true而不是在checkLastName() etc..中返回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;
 }
}

无论如何,可以通过多种方式简化此操作,但希望这可以帮助您:)

干杯。

本文链接:https://www.f2er.com/3121846.html

大家都在问