JS表单验证不完整

Question

我应该验证表格。有些事情无法正常运作。

1）当字段无效时，背景颜色不会改变。

2）它表示即使您输入正确的电子邮件也无效。我需要验证是否有＆＃39; @＆＃39;和＆＃39; .XX＆＃39;或者＆＃39; .XXX＆＃39;其中X是有效的字母字符。

3）当用户选择＆＃39;其他＆＃39;从下拉菜单中，不会弹出空字段。

非常感谢任何帮助：）

HTML

＆＃13;

＆＃13;

document.getElementById("mysub").addEventListener("click", function() {

  var firstname = document.getElementById("fname").value;
  var lastname = document.getElementById("lname").value;
  var email = document.getElementById("email").value;
  var message = document.getElementById("msg").value;

  if (firstname == "" || firstname == " ") {
    alert("Please fill out your first name");
    document.getElementById("fname").style.backgroundColor = "d64161";
  }

  if (lastname == "" || lastname == " ") {
    alert("Please fill out your last name");
    document.getElementById("lname").style.backgroundColor = "d64161";
  }

  if (email == "" || email == " ") {
    alert("Please fill out your email");
    document.getElementById("email").style.backgroundColor = "d64161";
  }
  if (!email.includes("@")) {
    alert("Invalid email");
  }
  if (!email.includes(".com") || !email.includes(".ca")) {
    alert("Invalid email")
  }

  if (message == "" || message == " ") {
    alert("Please enter a message");
    document.getElementById("msg").style.backgroundColor = "d64161";
  }
})

function test() {
  if (document.getElementById('options').value == 'other') {
    document.getElementById('emptyfield').style.display = 'block';
  } else {
    document.getElementById('emptyfield').style.display = 'none';
  }
}

document.getElementById("reset").addEventListener("click", function() {
  document.getElementById("myForm").reset();
})

＆＃13;

<form id="myForm" method="post">
  <fieldset>

    <legend>
      Contact information
    </legend>

    *First Name:
    <input type="text" name="fname" id="fname">
    <br><br> Middle/Initial:
    <input type="text" name="middle" maxLength="2" id="mname">
    <br><br> *Last Name:
    <input type="text" name="lname" id="lname">
    <br><br> *Email:
    <input type="text" name="email" id="email">
    <br><br> Phone:
    <input type="number" name="number" id="num">

  </fieldset>

  <fieldset>

    <legend>
      Message
    </legend>

    *Reason
    <select id="options" name="state" onclick='test()'>
                    <option value="Information">Infor reques</option>
                    <option value="feedback">Feedback</option>
                    <option value="other">Other</option> 
          </select>
    <input type="text" id="emptyfield" name="extra" style="display: none">

    <br><br> *Message <br>
    <textarea name="message" cols="30" rows="5" id="msg"></textarea>

  </fieldset>

  <input type="submit" value="Send" id="mysub">
  <input type="reset" value="Clear" id="reset">
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您未使用preventDefault，因此无论何时出现问题，表单都会被提交。您还没有正确设置颜色;十六进制颜色在它们之前需要#。

尝试让您的代码更干净，减少重复类似代码的数量，并确保用户只获得一个警报，而不是许多警报（警报对用户不友好）：

＆＃13;

＆＃13;

document.getElementById("mysub").addEventListener("click", (e) => {

  const firstname = document.getElementById("fname");
  const lastname = document.getElementById("lname");
  const email = document.getElementById("email");
  const message = document.getElementById("msg");

  const failingFields = [];

  if (firstname.value.trim() === '') failingFields.push([firstname, 'Please enter a first name']);
  if (lastname.value.trim() === '') failingFields.push([lastname, 'Please enter a last name']);
  const emailValue = email.value;
  if (emailValue.trim() === '' || !emailValue.includes('@') || (!emailValue.includes('.com') && !emailValue.includes('.ca'))) failingFields.push([email, 'Please enter a valid email']);
  if (message.value.trim() === '') failingFields.push([message, 'Please enter a message']);
  if (failingFields.length > 0) {
    e.preventDefault();
    const errorMessage = failingFields.map(failingField => failingField[1]).join('\n');
    failingFields.forEach(failingField => failingField[0].style.backgroundColor = '#d64161');
    alert(errorMessage);
    return;
  }
});

＆＃13;

<form id="myForm" method="post">
  <fieldset>

    <legend>
      Contact information
    </legend>

    *First Name:
    <input type="text" name="fname" id="fname">
    <br><br> Middle/Initial:
    <input type="text" name="middle" maxLength="2" id="mname">
    <br><br> *Last Name:
    <input type="text" name="lname" id="lname">
    <br><br> *Email:
    <input type="text" name="email" id="email">
    <br><br> Phone:
    <input type="number" name="number" id="num">

  </fieldset>

  <fieldset>

    <legend>
      Message
    </legend>

    *Reason
    <select id="options" name="state" onclick='test()'>
                    <option value="Information">Infor reques</option>
                    <option value="feedback">Feedback</option>
                    <option value="other">Other</option> 
          </select>
    <input type="text" id="emptyfield" name="extra" style="display: none">

    <br><br> *Message <br>
    <textarea name="message" cols="30" rows="5" id="msg"></textarea>

  </fieldset>

  <input type="submit" value="Send" id="mysub">
  <input type="reset" value="Clear" id="reset">
</form>

＆＃13;

＆＃13;

＆＃13;