使用验证表单制作网站

Question

我目前正在尝试为一所大学制作一个带有验证预订表格的网站，这是一个关于大学门户网站的项目。它曾经与我的javascript验证一起使用，直到我添加验证时间。问题是当我添加以验证时间以及每当我删除它时它都不起作用时，sumbit 按钮不起作用。

HTML 和 JavaScript

/** Validation Form**/
function validateFormOnSubmit(contact) {
  reason = "";
  reason += validateName(contact.name);
  reason += validateEmail(contact.email);
  reason += validatePhone(contact.phone);
  reason += validateID(contact.id);
  reason += validateWorkshop(contact.workshop);
  reason += validateDate(contact.date);
  console.log(reason);
  if (reason.length > 0) {
    return false;
  } else {
    return true;
  }
}
/**Validate name**/
function validateName(name) {
  var error = "";
  if (name.value.length == 0) {
    document.getElementById('name-error').innerHTML = "Please enter your First name.";
    var error = "1";
  } else {
    document.getElementById('name-error').innerHTML = '';
  }
  return error;
}
/**Validate email as required field and format**/
function trim(s) {
  return s.replace(/^s+|s+$/, '');
}
function validateEmail(email) {
  var error = "";
  var temail = trim(email.value);
  var emailFilter = /^[^@]+@[^@.]+.[^@]*ww$/;
  var illegalChars = /[()<>,;:\"[]]/;
  if (email.value == "") {
    document.getElementById('email-error').innerHTML = "Please enter your Email address.";
    var error = "2";
  } else if (!emailFilter.test(temail)) { /**test email for illegal characters**/
    document.getElementById('email-error').innerHTML = "Please enter a valid email address.";
    var error = "3";
  } else if (email.value.match(illegalChars)) {
    var error = "4";
    document.getElementById('email-error').innerHTML = "Email contains invalid characters.";
  } else {
    document.getElementById('email-error').innerHTML = '';
  }
  return error;
}
/**Validate phone for required and format**/
function validatePhone(phone) {
  var error = "";
  var stripped = phone.value.replace(/[().- ]/g, '');
  if (phone.value == "") {
    document.getElementById('phone-error').innerHTML = "Please enter your phone number";
    var error = '6';
  } else if (isNaN(parseInt(stripped))) {
    var error = "5";
    document.getElementById('phone-error').innerHTML = "The phone number contains illegal characters.";
  } else if (stripped.length < 10) {
    var error = "6";
    document.getElementById('phone-error').innerHTML = "The phone number is too short.";
  } else {
    document.getElementById('phone-error').innerHTML = '';
  }
  return error;
}
/**Validate student ID**/
function validateID(id) {
  var error = "";
  if (id.value.length == 0) {
    document.getElementById('id-error').innerHTML = "Please enter your ID.";
    var error = "1";
  } else {
    document.getElementById('id-error').innerHTML = '';
  }
  return error;
}
/**Validate workshop select**/
function validateWorkshop(workshop) {
  if ((contact.workshop[0].checked == false) && (contact.workshop[1].checked == false) && (contact.workshop[2].checked == false) && (contact.workshop[3].checked == false) && (contact.workshop[4].checked == false) && (contact.workshop[5].checked == false)) {
    document.getElementById('workshop-error').innerHTML = "You must select a workshop";
    var error = "2";
  } else {
    document.getElementById('workshop-error').innerHTML = '';
  }
  return error;
}
/**Validate date**/
function validateDate(date) {
  var error = "";
  if (date.value.length == 0) {
    document.getElementById('date-error').innerHTML = "Please enter a date.";
    var error = "1";
  } else {
    document.getElementById('date-error').innerHTML = '';
  }
  return error;
}

<header>
  <center><img src="portal2.png" style="width:1000px;height:100px;"></center>
  <p align="right">
    <a href=".pdf" download>
      <font color="darkblue">
        <font size="5"><b>Report</font></b></a>
  </p>
</header>
<hr class="line">
<div class="topnav" id="myTopnav">
  <a href="Index.html">Home</a>
  <a href="Timetable.html">Timetable</a>
  <a href="workshops.html">Book a workshop</a>
  <a href="contact.html">Contact</a>
</div>
<br>
<br>
<form id="contact" name="contact" onsubmit="return validateFormOnSubmit(this)" action="thankyou.html" method="post" target="_blank">
  <div>
    <label><u>First Name:</u></label><br>
    <br>
    <input type="text" name="name" id="name" tabindex="1" autofocus />
    <div id="name-error" class="error"></div>
  </div>
  <br>
  <div>
    <label><u>Email:</u></label><br>
    <br>
    <input type="email" name="email" id="email" tabindex="2" autofocus />
    <div id="email-error" class="error"></div>
  </div>
  <br>
  <div>
    <label><u>Phone:</u></label><br>
    <br>
    <input type="tel" name="phone" id="phone" tabindex="3" autofocus />
    <div id="phone-error" class="error"></div>
  </div>
  <br>
  <div>
    <label><u>Student ID:</u></label><br>
    <br>
    <input type="text" name="id" id="id" tabindex="4" autofocus />
    <div id="id-error" class="error"></div>
  </div>
  <br>
  <br>
  <div>
    <label><u>Please Select a workshop to book:</u></label>
    <br>
    <br>
    <input type="radio" name="workshop" id="art" tabindex="5" autofocus />Art Workshop <br>
    <input type="radio" name="workshop" id="computer" tabindex="6" autofocus />Computer Workshop <br>
    <input type="radio" name="workshop" id="film" tabindex="7" autofocus />Film Production Workshop <br>
    <input type="radio" name="workshop" id="music" tabindex="8" autofocus />Music Performance Workshop <br>
    <input type="radio" name="workshop" id="journalism" tabindex="9" autofocus />Journalism Workshop <br>
    <input type="radio" name="workshop" id="sociology" tabindex="10" autofocus />Sociology Workshop <br>
    <div id="workshop-error" class="error"></div>
  </div>
  <br>
  <p><u>Enter the date you want to book the workshop:</u></p>
  <input type="date" name="date" id="date" min="2017-10-01" tabindex="11" autofocus />
  <div id="date-error" class="error"></div>
  <br>
  <br>
  <div>
    <button type="submit" name="submit" id="submit" tabindex="12">Sumbit</button>
  </div>
</form>
<br>
<br>
<footer>University. Copyright © 2015
  <br>
  <p id="demo"></p>
  <script>
    document.getElementById("demo").innerHTML = Date();
  </script>
  <br>
</footer>

有什么建议吗？

Answer 1

你应该

用required做这种事情。

<input type="email" required>

注： 必需属性适用于以下输入类型：文本、搜索、URL、电话、电子邮件、密码、日期选择器、数字、复选框、单选和文件。

（https://www.w3schools.com/tags/att_input_required.asp）

也存在pattern.例如，如果您只想允许六个字母

<input type="text" pattern="[A-Za-z]{6}" required>

这是一个堆栈溢出问题，可提供更多信息。

Answer 2

正如我所看到的，问题不在于validateDate，而在于validateWorkshop。如果您尝试提交空白表单，而不选择研讨会，reason.length 将获得值 5。但是如果你选择一个研讨会，reason.length 得到 13。

并不是说我建议您进行验证，但为了让它正常工作，我只是添加了一个 var 错误 = ";在验证研讨会的开头。

/** Validation Form**/
function validateFormOnSubmit(contact) {
  reason = "";
  reason += validateName(contact.name);
  reason += validateEmail(contact.email);
  reason += validatePhone(contact.phone);
  reason += validateID(contact.id);
  reason += validateWorkshop(contact.workshop);
  reason += validateDate(contact.date);
  console.log(reason);
  if (reason.length > 0) {
    return false;
  } else {
    return true;
  }
}
/**Validate name**/
function validateName(name) {
  var error = "";
  if (name.value.length == 0) {
    document.getElementById('name-error').innerHTML = "Please enter your First name.";
    var error = "1";
  } else {
    document.getElementById('name-error').innerHTML = '';
  }
  return error;
}
/**Validate email as required field and format**/
function trim(s) {
  return s.replace(/^s+|s+$/, '');
}
function validateEmail(email) {
  var error = "";
  var temail = trim(email.value);
  var emailFilter = /^[^@]+@[^@.]+.[^@]*ww$/;
  var illegalChars = /[()<>,;:\"[]]/;
  if (email.value == "") {
    document.getElementById('email-error').innerHTML = "Please enter your Email address.";
    var error = "2";
  } else if (!emailFilter.test(temail)) { /**test email for illegal characters**/
    document.getElementById('email-error').innerHTML = "Please enter a valid email address.";
    var error = "3";
  } else if (email.value.match(illegalChars)) {
    var error = "4";
    document.getElementById('email-error').innerHTML = "Email contains invalid characters.";
  } else {
    document.getElementById('email-error').innerHTML = '';
  }
  return error;
}
/**Validate phone for required and format**/
function validatePhone(phone) {
  var error = "";
  var stripped = phone.value.replace(/[().- ]/g, '');
  if (phone.value == "") {
    document.getElementById('phone-error').innerHTML = "Please enter your phone number";
    var error = '6';
  } else if (isNaN(parseInt(stripped))) {
    var error = "5";
    document.getElementById('phone-error').innerHTML = "The phone number contains illegal characters.";
  } else if (stripped.length < 10) {
    var error = "6";
    document.getElementById('phone-error').innerHTML = "The phone number is too short.";
  } else {
    document.getElementById('phone-error').innerHTML = '';
  }
  return error;
}
/**Validate student ID**/
function validateID(id) {
  var error = "";
  if (id.value.length == 0) {
    document.getElementById('id-error').innerHTML = "Please enter your ID.";
    var error = "1";
  } else {
    document.getElementById('id-error').innerHTML = '';
  }
  return error;
}
/**Validate workshop select**/
function validateWorkshop(workshop) {
var error = "";
  if ((contact.workshop[0].checked == false) && (contact.workshop[1].checked == false) && (contact.workshop[2].checked == false) && (contact.workshop[3].checked == false) && (contact.workshop[4].checked == false) && (contact.workshop[5].checked == false)) {
    document.getElementById('workshop-error').innerHTML = "You must select a workshop";
    var error = "2";
  } else {
    document.getElementById('workshop-error').innerHTML = '';
  }
  return error;
}
/**Validate date**/
function validateDate(date) {
  var error = "";
  if (date.value.length == 0) {
    document.getElementById('date-error').innerHTML = "Please enter a date.";
    var error = "1";
  } else {
    document.getElementById('date-error').innerHTML = '';
  }
  return error;
}

<header>
  <center><img src="portal2.png" style="width:1000px;height:100px;"></center>
  <p align="right">
    <a href=".pdf" download>
      <font color="darkblue">
        <font size="5"><b>Report</font></b></a>
  </p>
</header>
<hr class="line">
<div class="topnav" id="myTopnav">
  <a href="Index.html">Home</a>
  <a href="Timetable.html">Timetable</a>
  <a href="workshops.html">Book a workshop</a>
  <a href="contact.html">Contact</a>
</div>
<br>
<br>
<form id="contact" name="contact" onsubmit="return validateFormOnSubmit(this)" action="thankyou.html" method="post" target="_blank">
  <div>
    <label><u>First Name:</u></label><br>
    <br>
    <input type="text" name="name" id="name" tabindex="1" autofocus />
    <div id="name-error" class="error"></div>
  </div>
  <br>
  <div>
    <label><u>Email:</u></label><br>
    <br>
    <input type="email" name="email" id="email" tabindex="2" autofocus />
    <div id="email-error" class="error"></div>
  </div>
  <br>
  <div>
    <label><u>Phone:</u></label><br>
    <br>
    <input type="tel" name="phone" id="phone" tabindex="3" autofocus />
    <div id="phone-error" class="error"></div>
  </div>
  <br>
  <div>
    <label><u>Student ID:</u></label><br>
    <br>
    <input type="text" name="id" id="id" tabindex="4" autofocus />
    <div id="id-error" class="error"></div>
  </div>
  <br>
  <br>
  <div>
    <label><u>Please Select a workshop to book:</u></label>
    <br>
    <br>
    <input type="radio" name="workshop" id="art" tabindex="5" autofocus />Art Workshop <br>
    <input type="radio" name="workshop" id="computer" tabindex="6" autofocus />Computer Workshop <br>
    <input type="radio" name="workshop" id="film" tabindex="7" autofocus />Film Production Workshop <br>
    <input type="radio" name="workshop" id="music" tabindex="8" autofocus />Music Performance Workshop <br>
    <input type="radio" name="workshop" id="journalism" tabindex="9" autofocus />Journalism Workshop <br>
    <input type="radio" name="workshop" id="sociology" tabindex="10" autofocus />Sociology Workshop <br>
    <div id="workshop-error" class="error"></div>
  </div>
  <br>
  <p><u>Enter the date you want to book the workshop:</u></p>
  <input type="date" name="date" id="date" min="2017-10-01" tabindex="11" autofocus />
  <div id="date-error" class="error"></div>
  <br>
  <br>
  <div>
    <button type="submit" name="submit" id="submit" tabindex="12">Sumbit</button>
  </div>
</form>
<br>
<br>
<footer>University. Copyright © 2015
  <br>
  <p id="demo"></p>
  <script>
    document.getElementById("demo").innerHTML = Date();
  </script>
  <br>
</footer>