ryanl11 ryanl11 - 11 days ago 3
Javascript Question

Having trouble displaying errors with Javascript Form Validation

I am using Regex to check my user input and then adding to an empty array called message when an error is found. I am having trouble displaying these errors along the top of the form
I am using Regex to check my user input and then adding to an empty array called message when an error is found. I am having trouble displaying these errors along the top of the form

<script>
function emailCheck(email) {
var re = /^[a-zA-Z\d]+\.[a-zA-Z\d]+@mohawkcollege.(?:com|ca|org)$/;
return re.test(email);
}

function phoneCheck(phone) {
var re = /^\b\d{3}[-.]?\d{3}[-.]?\d{4}\b$/;
return re.test(phone);
}

function postalCheck(postal){
var re = /^([a-zA-Z]\d[a-zA-Z])[\s\-]?(\d[a-zA-Z]\d)+$/;
return re.test(postal);
}

function streetCheck(street) {
var re = /^[1-9]{2,3} +[a-zA-Z]+ +(Street|street|road|Road)+$/;
return re.test(street);
}

function nameCheck(fname) {
var re = /^(mr\.|mrs\.|Mr\.|Mrs\.)\s+[a-zA-Z]+\s+[a-zA-Z]+$/;
return re.test(fname);
}

function errorCheck() {
var message = "";
var email = document.forms["myForm"]["email"].value;
var phone = document.forms["myForm"]["phone"].value;
var postal = document.forms["myForm"]["postal"].value;
var fname = document.forms["myForm"]["fname"].value;
var street = document.forms["myForm"]["street"].value;

if(phoneCheck(phone)) {
alert (phone + " is valid");
}
else{
message += "Phone invalid";
}

if(postalCheck(postal)) {
alert (postal + " is valid");
}
else {
message += "Postal invalid";
}

if (nameCheck(fname)) {
alert (fname + " is valid");
}
else {
message += "name invalid";
}

if (streetCheck(street)) {
alert (street + " is valid");
}
else {
message += "Street invalid";
}

if (emailCheck(email)) {
alert (email + " is valid");
}
else {
message += "email invalid";
}
return false;

$("#errorMessage").html(message);
}
</script>


here is the HTML

<html>
<body>
<p id="errorMessage"></p>
<link rel='stylesheet' type='text/css' href='Lab4.css'>
<table>
<tr>
<td class="top">
<a href=<?PHP echo $_SERVER["PHP_SELF"] ?>>&nbsp;Refresh ThisPage&nbsp;</a>
</td>
<td class="top">
&nbsp;Show Logfile.txt&nbsp;
</td>
<td class="top">
&nbsp;Show Logfile.txt Formatted&nbsp;
</td>
<td class="top">
&nbsp;Clear logfile.txt&nbsp;
</td>
</tr>
</table>
<form name="myForm" onsubmit="errorCheck()">
<table class="body">
<tr>
<td class="column1">
Full Name:
</td>
<td class="column2">
<input id="fname" type="text" >
</td>
<td class="column3">
Salution of Mr. and Mrs. followed by two text strings separated by any number of spaces
</td>
</tr>
<tr>
<td class="column1">
Street:
</td>
<td class="column2">
<input id="street" type="text" >
</td>
<td class="column3">
2 or 3 digit number followed by a text string ending with Street or Road separated by any number of space
</td>
</tr>
<tr>
<td class="column1">
PostalCode:
</td>
<td class="column2">
<input id = "postal" type="text" >
</td>
<td class="column3">
Char Char Digit optional Hyphen or space Char Digit Digit (abclxyz and number 0 not allowed. Case insensitive
</td>
</tr>
<tr>
<td class="column1">
Phone:
</td>
<td class="column2">
<input id = "phone" type="text" >
</td>
<td class="column3">
10 digits, first 3 digits have optional parentheses, either side of digits 456 are optional space, dot or hyphen
</td>
</tr>
<tr>
<td class="column1">
Email:
</td>
<td class="column2">
<input id="email" type="text">
</td>
<td class="column3">
firstname.lastname@mohawkcollege.domain (firstname and lastname must be 4-10 characters in length, domain may be either .com, .ca or .org)
</td>
</tr>
</table>
<br>
<input class="submit" type="submit" id="check" value="Submit me now!!!"/>
</form>
</body>
</html>

Answer

You are returning from errorCheck() before you set the content of #errorMessage.

I moved the html() call before return and made message an array (as you said) so you can display the messages in a list format.

function emailCheck(email) {
  var re = /^[a-zA-Z\d]+\.[a-zA-Z\d]+@mohawkcollege.(?:com|ca|org)$/;
  return re.test(email);
}

function phoneCheck(phone) {
  var re = /^\b\d{3}[-.]?\d{3}[-.]?\d{4}\b$/;
  return re.test(phone);
}

function postalCheck(postal) {
  var re = /^([a-zA-Z]\d[a-zA-Z])[\s\-]?(\d[a-zA-Z]\d)+$/;
  return re.test(postal);
}

function streetCheck(street) {
  var re = /^[1-9]{2,3} +[a-zA-Z]+ +(Street|street|road|Road)+$/;
  return re.test(street);
}

function nameCheck(fname) {
  var re = /^(mr\.|mrs\.|Mr\.|Mrs\.)\s+[a-zA-Z]+\s+[a-zA-Z]+$/;
  return re.test(fname);
}

function errorCheck() {
  var message = [];
  var email = document.forms["myForm"]["email"].value;
  var phone = document.forms["myForm"]["phone"].value;
  var postal = document.forms["myForm"]["postal"].value;
  var fname = document.forms["myForm"]["fname"].value;
  var street = document.forms["myForm"]["street"].value;

  if (phoneCheck(phone)) {
    alert(phone + " is valid");
  } else {
    message.push("Phone invalid");
  }

  if (postalCheck(postal)) {
    alert(postal + " is valid");
  } else {
    message.push("Postal invalid");
  }
  if (nameCheck(fname)) {
    alert(fname + " is valid");
  } else {
    message.push("name invalid");
  }
  if (streetCheck(street)) {
    alert(street + " is valid");
  } else {
    message.push("Street invalid");
  }

  if (emailCheck(email)) {
    alert(email + " is valid");
  } else {
    message.push("email invalid");
  }

  $("#errorMessage").html(`<ul><li>${message.join('</li><li>')}</li></ul>`);

  return false;

}
#errorMessage {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="errorMessage"></p>

<table>
  <tr>
    <td class="top">
    </td>
    <td class="top">&nbsp;Show Logfile.txt&nbsp;</td>
    <td class="top">&nbsp;Show Logfile.txt Formatted&nbsp;</td>
    <td class="top">&nbsp;Clear logfile.txt&nbsp;</td>
  </tr>
</table>
<form name="myForm">
  <table class="body">
    <tr>
      <td class="column1">Full Name:</td>
      <td class="column2">
        <input id="fname" type="text">
      </td>
      <td class="column3">Salution of Mr. and Mrs. followed by two text strings separated by any number of spaces</td>
    </tr>
    <tr>
      <td class="column1">Street:</td>
      <td class="column2">
        <input id="street" type="text">
      </td>
      <td class="column3">2 or 3 digit number followed by a text string ending with Street or Road separated by any number of space</td>
    </tr>
    <tr>
      <td class="column1">PostalCode:</td>
      <td class="column2">
        <input id="postal" type="text">
      </td>
      <td class="column3">Char Char Digit optional Hyphen or space Char Digit Digit (abclxyz and number 0 not allowed. Case insensitive</td>
    </tr>
    <tr>
      <td class="column1">Phone:</td>
      <td class="column2">
        <input id="phone" type="text">
      </td>
      <td class="column3">10 digits, first 3 digits have optional parentheses, either side of digits 456 are optional space, dot or hyphen</td>
    </tr>
    <tr>
      <td class="column1">Email:</td>
      <td class="column2">
        <input id="email" type="text">
      </td>
      <td class="column3">firstname.lastname@mohawkcollege.domain (firstname and lastname must be 4-10 characters in length, domain may be either .com, .ca or .org)</td>
    </tr>
  </table>

  <br>

  <input class="submit" type="button" onclick="errorCheck()" id="check" value="Submit me now!!!" />
</form>

Comments