Skip to content

Commit 54f6502

Browse files
forstisabellaforstisabella
committed
Adding error messages when field fails validation
+broke email regex
1 parent bacb947 commit 54f6502

File tree

2 files changed

+107
-33
lines changed

2 files changed

+107
-33
lines changed

‎src/_includes/components/codepens/identify-spec.html

Lines changed: 93 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -20,42 +20,97 @@
2020
var received_ts = new Date(received)
2121
var received_iso = received_ts.toISOString()
2222

23-
// Add regular expression check for name
24-
var nameRegex = /^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/;
25-
if (!nameRegex.test(name)) {
26-
alert("Please enter your name");
27-
return;
28-
}
29-
30-
// Add regular expression check for login #s
31-
var loginRegex = /^[0-9]+$/;
32-
if (!loginRegex.test(logins)) {
33-
alert("Please enter only numbers in the 'Logins' field");
34-
return;
35-
}
23+
var errors = [];
3624

37-
// Add regular expression check for valid email address
38-
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
39-
if (!emailRegex.test(email)) {
40-
alert("Please enter a valid email address");
41-
return;
42-
}
43-
44-
// Add regular expression check for city name
45-
var cityRegex = /^[A-Za-z\s-']+$/;
46-
if (!cityRegex.test(city)) {
47-
alert("Please enter a valid city name in the 'City' field.");
48-
return;
49-
}
25+
// Add regular expression check for name
26+
var nameRegex = /^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/;
27+
if (!nameRegex.test(name)) {
28+
const nameError = document.getElementById("name-error");
29+
nameError.style.display = "block";
30+
const nameField = document.getElementById("name");
31+
nameField.style.outline = "2px solid red";
32+
errors.push("Name is invalid");
33+
} else {
34+
const nameError = document.getElementById("name-error");
35+
nameError.style.display = "none";
36+
const nameField = document.getElementById("name");
37+
nameField.style.outline = "";
38+
}
39+
40+
// Sub name for email - fix this
41+
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
42+
if (!emailRegex.test(name)) {
43+
const emailError = document.getElementById("email-error");
44+
emailError.style.display = "block";
45+
const emailField = document.getElementById("email");
46+
emailField.style.outline = "2px solid red";
47+
errors.push("Email is invalid");
48+
} else {
49+
const emailError = document.getElementById("email-error");
50+
emailError.style.display = "none";
51+
const emailField = document.getElementById("email");
52+
emailField.style.outline = "";
53+
}
54+
55+
// Add regular expression check for login #s
56+
var loginRegex = /^[0-9]+$/;
57+
if (!loginRegex.test(logins)) {
58+
const loginsError = document.getElementById("logins-error");
59+
loginsError.style.display = "block";
60+
const loginsField = document.getElementById("logins");
61+
loginsField.style.outline = "2px solid red";
62+
errors.push("Logins is invalid");
63+
} else {
64+
const loginsError = document.getElementById("logins-error");
65+
loginsError.style.display = "none";
66+
const loginsField = document.getElementById("logins");
67+
loginsField.style.outline = "";
68+
}
69+
70+
// Add regular expression check for city name
71+
var cityRegex = /^[A-Za-z\s-']+$/;
72+
if (!cityRegex.test(city)) {
73+
const cityError = document.getElementById("city-error");
74+
cityError.style.display = "block";
75+
const cityField = document.getElementById("city");
76+
cityField.style.outline = "2px solid red";
77+
errors.push("City is invalid");
78+
} else {
79+
const cityError = document.getElementById("city-error")
80+
cityError.style.display = "none";
81+
const cityField = document.getElementById("city")
82+
cityField.style.outline = "";
83+
}
84+
85+
// Add regular expression check for postcode
86+
var postcodeRegex = /^\d{5}$/;
87+
if (!postcodeRegex.test(postcode)) {
88+
const postcodeError = document.getElementById("postcode-error");
89+
postcodeError.style.display = "block";
90+
const postcodeField = document.getElementById("postcode");
91+
postcodeField.style.outline = "2px solid red";
92+
errors.push("Postcode is invalid");
93+
} else {
94+
const postcodeError = document.getElementById("postcode-error")
95+
postcodeError.style.display = "none";
96+
const postcodeField = document.getElementById("postcode")
97+
postcodeField.style.outline = "";
98+
}
99+
100+
if (errors.length > 0) {
101+
// Display all the errors and highlight the respective fields
102+
const errorDiv = document.getElementById("errors");
103+
errorDiv.innerHTML = "";
104+
errors.forEach(function(error) {
105+
errorDiv.innerHTML += "<p>" + error + "</p>";
106+
});
107+
return false;
108+
}
50109

51-
// Add regular expression check for postcode
52-
var postcodeRegex = /^\d{5}$/;
53-
if (!postcodeRegex.test(postcode)) {
54-
alert("Please enter a valid five-digit zip code");
55-
return
56-
}
110+
// If no errors, submit the form
111+
return true;
57112

58-
var output = `{
113+
var output = `{
59114
"anonymousId": "507f191e810c19729de860ea",
60115
"channel": "browser",
61116
"context": {
@@ -111,20 +166,25 @@ <h4> Sample Identify </h4>
111166
<div class="sample-form">
112167
<label for="name">Name:</label>
113168
<input type="text" id="name" value="Dolly Parton">
169+
<span class="error-message" id="name-error">Please enter your name.</span>
114170
<label for="email">Email:</label>
115171
<input type="text" id="email" value="[email protected]">
172+
<span class="error-message" id="email-error">Please enter a valid email address.</span>
116173
<label for="plan">Plan:</label>
117174
<input type="text" id="plan" value="Premium">
118175
<label for="logins">Logins:</label>
119176
<input type="text" id="logins" value="2">
177+
<span class="error-message" id="logins-error">Please enter only numbers in the 'Logins' field.</span>
120178
<label for="street">Street:</label>
121179
<input type="text" id="street" value="P.O. Box 150307">
122180
<label for="city">City:</label>
123181
<input type="text" id="city" value="Nashville">
182+
<span class="error-message" id="city-error">Please enter a valid city name in the 'City' field.</span>
124183
<label for="state">State:</label>
125184
<input type="text" id="state" value="TN">
126185
<label for="postcode">Zip Code:</label>
127186
<input type="text" id="postcode" value="37215">
187+
<span class="error-message" id="postcode-error">Please enter a valid five-digit zip code.</span>
128188
<label for="country">Country:</label>
129189
<input type="text" id="country" value="USA">
130190
<input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()" value="See a sample identify call">

‎src/_sass/components/_sample-form.scss

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,17 @@
5151
}
5252
}
5353

54+
.error-message {
55+
color: red;
56+
font-size: 12px;
57+
grid-column: 2 / 3;
58+
margin-top: 0px;
59+
gap: 2px;
60+
display: none;
61+
62+
}
63+
64+
.invalid-field {
65+
outline: 2px red;
66+
}
67+

0 commit comments

Comments
 (0)