javascript - 联系表单验证javascript

Question

昨天我学习了使用正则表达式进行客户端验证的教程。它在大多数情况下运作良好。我无法弄清楚为了停止工作我做了什么。

基本上，我认为表单根本不应该提交，即使它通过了验证。当我单击提交并且所有字段都为空时，它们应该都显示错误消息，但只有名称字段会显示。显示错误消息后，表单仍会提交

HTML

  <form>

          <div class="form-group">
            <label for="contact-name">Name</label>
            <input type="text" class="form-control" id="contact-name" name="name"       placeholder="Enter your name.." onkeyup='validateName()'>
            <span class='error-message' id='name-error'></span>
          </div>

          <div class="form-group">
            <label for="contact-phone">Phone Number</label>
            <input type="tel" class="form-control" id="contact-phone" name="phone" placeholder="Ex: 1231231234" onkeyup='validatePhone()'>
            <span class='error-message' id='phone-error'></span>
          </div>

          <div class="form-group">
            <label for="contact-email">Email address</label>
            <input type="email" class="form-control" id="contact-email" name="email" placeholder="Enter Email" onkeyup='validateEmail()'>
            <span class='error-message' id='email-error'></span>
          </div>   

          <div class="form-group">
            <label for='contactMessage'>Your Message</label>
            <textarea class="form-control" rows="5" id='contact-message'  name='message'  placeholder="Enter a brief message" onkeyup='validateMessage()'></textarea>
            <span class='error-message' id='message-error'></span>
          </div>

        <button onclick='validateForm()' class="btn btn-default">Submit</button>
        <span class='error-message' id='submit-error'></span>
      </form>

JS

function validateName() {

  var name = document.getElementById('contact-name').value;

  if(name.length == 0) {

    producePrompt('Name is required', 'name-error' , 'red')
    return false;

  }

  if (!name.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)) {

    producePrompt('First and last name, please.','name-error', 'red');
    return false;

  }

  producePrompt('Valid', 'name-error', 'green');
  return true;

}

function validatePhone() {

  var phone = document.getElementById('contact-phone').value;

    if(phone.length == 0) {
      producePrompt('Phone number is required.', 'phone-error', 'red');
      return false;
    }

    if(phone.length != 10) {
      producePrompt('Include area code.', 'phone-error', 'red');
      return false;
    }

    if(!phone.match(/^[0-9]{10}$/)) {
      producePrompt('Only digits, please.' ,'phone-error', 'red');
      return false;
    }

    producePrompt('Valid', 'phone-error', 'green');
    return true;

}

function validateEmail () {

  var email = document.getElementById('contact-email').value;

  if(email.length == 0) {

    producePrompt('Email Invalid','email-error', 'red');
    return false;

  }

  if(!email.match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)) {

    producePrompt('Email Invalid', 'email-error', 'red');
    return false;

  }

  producePrompt('Valid', 'email-error', 'green');
  return true;

}

function validateMessage() {
  var message = document.getElementById('contact-message').value;
  var required = 30;
  var left = required - message.length;

  if (left > 0) {
    producePrompt(left + ' more characters required','message-error','red');
    return false;
  }

  producePrompt('Valid', 'message-error', 'green');
  return true;

}

function validateForm() {
  if (!validateName() || !validatePhone() || !validateEmail() || !validateMessage()) {
    jsShow('submit-error');
    producePrompt('Please fix errors to submit.', 'submit-error', 'red');
    setTimeout(function(){jsHide('submit-error');}, 2000);
  }
  else {

  }
}

function jsShow(id) {
  document.getElementById(id).style.display = 'block';
}

function jsHide(id) {
  document.getElementById(id).style.display = 'none';
}




function producePrompt(message, promptLocation, color) {

  document.getElementById(promptLocation).innerHTML = message;
  document.getElementById(promptLocation).style.color = color;


}

我知道这并不是为了实际向 PHP 发送任何内容而设置的。我相信 javascript 代码应该可以找到，因为没有任何改变，但 HTML 有。

Answer 1

在点击事件中添加一个return:

<button onclick='return validateForm()' class="btn btn-default">Submit</button>

然后，如果失败，函数应该返回false:

function validateForm() {
    if (!validateName() || !validatePhone() || !validateEmail() || !validateMessage()) {
        jsShow('submit-error');
        producePrompt('Please fix errors to submit.', 'submit-error', 'red');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return false;
    }
}

参见 fiddle