使用验证表单建立一个网站

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>

  

注意：必需属性适用于以下输入类型：文本，搜索，网址，电话，电子邮件，密码，日期选择器，号码，复选框，广播和文件。

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

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

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

这里有一个stackoverflow question，可以提供更多信息。

Answer 2

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

不是我推荐你的验证，但为了让这个工作，我只是添加了一个var error =“”;在validateWorkshop的开始。

/** 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) {
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>