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

Answer 2

一旦发现问题，请立即返回false - 设置标志 - 返回false;阻止您的其余代码执行，并且您的错误消息不会显示。

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

     var allFilled = true;

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

}

Answer 3

回答你的问题，是的，一旦所有的if子句都失败了，它就会触及else子句并返回true。

我会建议一个改进思路。 if（name == null || name ==＆＃34;＆＃34;）if（！name）可以重写。

所以：

function validateForm（）{ var name = document.forms [＆＃34; contactForm＆＃34;] [＆＃34; name＆＃34;]。value; var email = document.forms [＆＃34; contactForm＆＃34;] [＆＃34; _replyto＆＃34;]。value; var message = document.forms [＆＃34; contactForm＆＃34;] [＆＃34; message＆＃34;]。value;

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

如果声明要测试多个输入已完成

3 个答案: