Having trouble displaying errors with Javascript Form Validation
Question
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"] ?>> Refresh ThisPage </a>
</td>
<td class="top">
Show Logfile.txt
</td>
<td class="top">
Show Logfile.txt Formatted
</td>
<td class="top">
Clear logfile.txt
</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>
1 answers
solution1
0 ACCPTED 2016-11-23 02:37:06
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"> Show Logfile.txt </td> <td class="top"> Show Logfile.txt Formatted </td> <td class="top"> Clear logfile.txt </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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript form validation not displaying errors
having trouble with javascript on blur form validation
Having trouble with form validation
Having trouble displaying an array in javascript
having trouble displaying javascript array
Javascript form validation errors
Trouble with JavaScript Form Validation Function
I am having trouble with validation and form wizard
Having trouble displaying my number using javascript
Displaying Javascript form validation message
Related Tags