javascript - 制作一个带有验证表单的网站

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 = /^[^@]+@[^@.]+\.[^@]*\w\w$/;
  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>

Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

( https://www.w3schools.com/tags/att_input_required.asp )

还存在模式。例如，如果您只想允许六个字母

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

这是一个stackoverflow question这提供了更多信息。