javascript - 用于测试多个输入是否已完成的 if 语句

Question

我有一个由 3 个输入字段组成的简单表单。所有输入都是必需的。我已将表单的“onsubmit”属性设置为“return validateForm()”。在此函数中，我正在进行表单验证。到目前为止，我已经让它工作了，如果所有字段都为空，则会显示错误范围。让各个错误出现在适当的字段中是我遇到麻烦的部分。基本上，如果我将 2 个字段留空，则只会出现一条错误消息。我希望无论哪些字段为空，都会显示相应的错误消息。

这是我的代码:

HTML:

<form id="contactForm" action="contact.php" method="post" onsubmit="return validateForm()">
    <div>
        <input type="text" name="name" id="name" placeholder="Your Name"  maxlength="65" tabindex="1">
        <label for="name">Name</label>
        <span class="error" id="fname">Please tell me your name.</span>
    </div>
    <div>
        <input type="email" name="_replyto" id="email" placeholder="Your Email"  tabindex="2">
        <label for="email">Email</label>
        <span class="error" id="yourEmail">Please tell me your email address.</span>
    </div>
    <div>
        <textarea name="message" id="message" rows="10" placeholder="Your Message..." maxlength="500" tabindex="3" ></textarea>
        <label for="message">Your Message</label>
        <span class="error" id="yourMessage">Please leave me a message.</span>
    </div>
    <div>
        <input type="submit" value="Send" tabindex="4">
    </div>
</form>

Javascript:

function validateForm() {
    var name = document.forms["contactForm"]["name"].value;
    var email = document.forms["contactForm"]["_replyto"].value;
    var message = document.forms["contactForm"]["message"].value;

    if ((name == null || name == "") && (email == null || email == "") && (message == null || message == "")) {
        $(".error").show();
        return false;
    } else if (name == null || name == "") {
        $("#fname").show();
        return false;
    } else if (email == null || email == "") {
        $("#yourEmail").show();
        return false;
    } else if (message == null || message == "") {
        $("#yourMessage").show();
        return false;
    } else {
        //submit form
        return true;
    }
}

一旦函数返回 true，我是否正确地说表单将通过 contact.php 文件提交？

提前致谢。

Answer 1

function validateForm() {
  var name = $('#name').val(), email = $('#email').val(),
      message = $('#message').val();

  $('.error').hide();

  if (!name)  $("#fname").fadeIn();
  if (!email) $("#yourEmail").fadeIn();
  if (!message) $("#yourMessage").fadeIn();

  return $('.error:visible, .error:animated').length == 0;
}

它可以更短、更统一

function validateForm() {
  $('.error').hide();
  $('textarea, input[type=text]').each(function() {
     if (!$(this).val())
        $(this).siblings('.error').fadeIn();    
  });
  return $('.error:visible, .error:animated').length == 0;
}