Question

单击提交后，表单不会在输入字段旁边生成错误，它会刷新页面并清除所有字段。

HTML：

<form id="mc-form" method="POST">
  <div class="form-group col-xs-12 ">
    <label for="name" hidden>שם פרטי</label>
    <input type="text" name="name" id="name" class="cv form-control" placeholder="שם פרטי" onkeyup='validateMessage()'>
    <span class='error-message' id='name-error'></span>

  </div>
  <div class="form-group col-xs-12 ">
    <label for="lastName" hidden>שם משפחה</label>
    <input type="text" name="lastName" id="lastName" class="cv form-control" placeholder="שם משפחה" onkeyup='validateMessage()'>
    <span class='error-message' id='name-error'></span>
  </div>
  <div class="form-group col-xs-12 ">
    <label for="phone" hidden>טלפון</label>
    <input type="text" name="phone" id="phone" class="cv form-control" placeholder="טלפון" onkeyup='validateMessage()'>
    <span class='error-message' id='name-error'></span>
  </div>
  <div class="form-group col-xs-12 ">
    <label for="email" hidden>דואר אלקטרוני</label>
    <input type="email" name="email" id="email" class="cv form-control" placeholder="דואר אלקטרוני" onkeyup='validateMessage()'>
    <span class='error-message' id='name-error'></span>
  </div>
  <div class="form-group col-xs-12 ">
    <label for="subject" hidden>נושא</label>
    <input type="text" name="subject" id="subject" class="cv form-control" placeholder="נושא" onkeyup='validateMessage()'>
  </div>
  <div class="form-group col-xs-12 ">
    <label for="message" hidden>הודעה</label>
    <textarea name="message" id="message" class="cv form-control message" placeholder="השאירו את הודעתכם פה" rows="4" cols="50" onkeyup='validateMessage()'></textarea>
  </div>
  <!-- <input type="submit" id="submit-button" class="btn btn-custom-outline " value="שלח" > -->
  <button onclick='return validateForm()' class="btn btn-custom-outline " id="submit-button">שלח</button>
  <span class='error-message' id='submit-error'></span>

  <br>
  <!-- <div class="success"><?= $success ?></div>-->
  <!--<span class="error"></span> -->
</form>

我的JavaScript：

function validateName() {

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

  if(name.length == 0) {

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

  }

  if (!name.match( /^[a-zא-ת]+(\s[a-zא-ת]+)*$/i)) {

    producePrompt('Letters only please.','name-error', 'red');
    return false;

  }

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

}

function validatePhone() {

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

    if(phone.length == 0) {
      producePrompt('Phone number is required.', '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('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() ) {
        jsShow('submit-error');
        producePrompt('Please fix errors to submit.', 'submit-error', 'red');
        setTimeout(function(){jsHide('submit-error');}, 2000);
        return false;
    }
     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;


}

我的文章在index.html中，表格的相同页面，最后：

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" ></script>
        <script src="js/bootstrap.min.js" ></script>
           <!-- [ SLIDER SCRIPT ] -->  
        <script type="text/javascript" src="js/SmoothScroll.js"></script>
        <script src="js/script.js" ></script>
        <script src="js/validateform.js" ></script>

单击提交后，表单不会在输入字段旁边生成错误，它会刷新页面并清除所有字段。

Answer 1

您在调用

时遇到的问题

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

以及您未传递name-error的任何其他错误正在发生，因为没有ID为email-error的元素，它们都具有相同的ID。抛出错误时，函数返回undefined而不是false，导致表单被提交。

使用Chrome开发工具时，您可以进入设置并检查preserve log即使在页面刷新后也可以看到错误。

关于检查所有错误而不仅仅是第一个...

if (!validateName() || !validatePhone() || !validateEmail() ) { 或者这里的陈述意味着第一个错误导致其余的不被检查。相反，你可以做类似下面的事情

var vn = validateName();
var vp = validatePhone();
var ve = validateEmail();

if (!vn || !vp || !ve) {

表单验证不适用于提交

1 个答案: