Skip to content

Commit 11dffe8

Browse files
forstisabellaforstisabella
authored
Merge pull request #4773 from segmentio/form-v2
v2 sample form
2 parents 3f61d33 + 884e4b4 commit 11dffe8

File tree

3 files changed

+338
-63
lines changed

3 files changed

+338
-63
lines changed

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

Lines changed: 146 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,145 @@
11
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"
22
integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ=="
33
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4-
<script type="text/javascript">
5-
function showMessage() {
6-
var name = document.getElementById("name").value;
7-
var industry = document.getElementById("industry").value;
8-
var employees = document.getElementById("employees").value;
9-
var plan = document.getElementById("plan").value;
10-
var totalBilled = document.getElementById("totalBilled").value;
11-
var user_agent = window.navigator.userAgent
12-
var ts = Date.now()
13-
var date = new Date(ts)
14-
var now = date.toISOString()
15-
var received = ts + 233
16-
var received_ts = new Date(received)
17-
var received_iso = received_ts.toISOString()
4+
<script type="text/javascript">
5+
function showMessage() {
6+
var name = document.getElementById("name").value;
7+
var industry = document.getElementById("industry").value;
8+
var employees = document.getElementById("employees").value;
9+
var plan = document.getElementById("plan").value;
10+
var totalBilled = document.getElementById("totalBilled").value;
11+
var user_agent = window.navigator.userAgent;
12+
var ts = Date.now();
13+
var date = new Date(ts);
14+
var now = date.toISOString();
15+
var received = ts + 233;
16+
var received_ts = new Date(received);
17+
var received_iso = received_ts.toISOString();
18+
19+
var errors = [];
20+
21+
// Regular expression check name field is not empty
22+
var nameRegex = /.+/;
23+
if (!nameRegex.test(name)) {
24+
const nameError = document.getElementById("name-error");
25+
nameError.style.display = "block";
26+
const nameField = document.getElementById("name");
27+
nameField.style.outline = "2px solid red";
28+
errors.push("Name is invalid");
29+
} else {
30+
const nameError = document.getElementById("name-error")
31+
nameError.style.display = "none";
32+
const nameField = document.getElementById("name")
33+
nameField.style.outline = "";
34+
}
35+
36+
// Regular expression check for industry name
37+
var industryRegex = /^[A-Za-z-]+$/;
38+
if (!industryRegex.test(industry)) {
39+
const industryError = document.getElementById("industry-error");
40+
industryError.style.display = "block";
41+
const industryField = document.getElementById("industry");
42+
industryField.style.outline = "2px solid red";
43+
errors.push("Industry is invalid");
44+
} else {
45+
const industryError = document.getElementById("industry-error")
46+
industryError.style.display = "none";
47+
const industryField = document.getElementById("industry")
48+
industryField.style.outline = "";
49+
}
50+
51+
// Add regular expression check for number of employees
52+
var employeesRegex = /^[0-9]+$/;
53+
if (!employeesRegex.test(employees)) {
54+
const employeesError = document.getElementById("employees-error");
55+
employeesError.style.display = "block";
56+
const employeesField = document.getElementById("employees");
57+
employeesField.style.outline = "2px solid red";
58+
errors.push("Employees is invalid");
59+
} else {
60+
const employeesError = document.getElementById("employees-error");
61+
employeesError.style.display = "none";
62+
const employeesField = document.getElementById("employees");
63+
employeesField.style.outline = "";
64+
}
65+
66+
// Add regular expression check to make sure plan field is not empty
67+
var planRegex = /.+/;
68+
if (!planRegex.test(plan)) {
69+
planError = document.getElementById("plan-error");
70+
planError.style.display = "block";
71+
plan = document.getElementById("plan");
72+
plan.style.outline = "2px solid red";
73+
errors.push("Plan is invalid");
74+
} else {
75+
const planError = document.getElementById("plan-error");
76+
planError.style.display = "none";
77+
const plan = document.getElementById("plan");
78+
plan.style.outline = "";
79+
}
80+
81+
// Add regular expression check for total billed
82+
var billedRegex = /^[0-9]+$/;
83+
if (!billedRegex.test(totalBilled)) {
84+
billedError = document.getElementById("billed-error");
85+
billedError.style.display = "block";
86+
totalBilled = document.getElementById("totalBilled");
87+
totalBilled.style.outline = "2px solid red";
88+
errors.push("Total Billed is invalid");
89+
} else {
90+
const billedError = document.getElementById("billed-error");
91+
billedError.style.display = "none";
92+
const totalBilled = document.getElementById("totalBilled");
93+
totalBilled.style.outline = "";
94+
}
95+
96+
if (errors.length > 0) {
97+
// Display all the errors and highlight the respective fields
98+
const errorDiv = document.getElementById("errors");
99+
errorDiv.innerHTML = "";
100+
errors.forEach(function(error) {
101+
errorDiv.innerHTML += "<p>" + error + "</p>";
102+
});
103+
return false;
104+
}
105+
18106
var output = `{
19-
"anonymousId": "507f191e810c19729de860ea",
20-
"channel": "browser",
21-
"context": {
22-
"ip": "8.8.8.8",
23-
"userAgent": "${user_agent}"
24-
},
25-
"integrations": {
26-
"All": true,
27-
"Mixpanel": false,
28-
"Salesforce": false
29-
},
30-
"messageId": "022bb90c-bbac-11e4-8dfc-aa07a5b093db",
31-
"receivedAt": "${received_iso}",
32-
"sentAt": "${now}",
33-
"timestamp": "${now}",
34-
"traits": {
35-
"name": "${name}",
36-
"industry": "${industry}",
37-
"employees": ${employees},
38-
"plan": "${plan}",
39-
"total billed": ${totalBilled}
40-
},
41-
"type": "group",
42-
"userId": "97980cfea0067",
43-
"groupId": "0e8c78ea9d97a7b8185e8632",
44-
"version": "1.1"
45-
}`
46-
output_container.innerHTML = output
47-
Prism.highlightElement(output_container)
107+
"anonymousId": "507f191e810c19729de860ea",
108+
"channel": "browser",
109+
"context": {
110+
"ip": "8.8.8.8",
111+
"userAgent": "${user_agent}"
112+
},
113+
"integrations": {
114+
"All": true,
115+
"Mixpanel": false,
116+
"Salesforce": false
117+
},
118+
"messageId": "022bb90c-bbac-11e4-8dfc-aa07a5b093db",
119+
"receivedAt": "${received_iso}",
120+
"sentAt": "${now}",
121+
"timestamp": "${now}",
122+
"traits": {
123+
"name": "${name}",
124+
"industry": "${industry}",
125+
"employees": ${employees},
126+
"plan": "${plan}",
127+
"total billed": ${totalBilled}
128+
},
129+
"type": "group",
130+
"userId": "97980cfea0067",
131+
"groupId": "0e8c78ea9d97a7b8185e8632",
132+
"version": "1.1"
133+
}`;
134+
135+
var output_container = document.getElementById("output_container");
136+
output_container.innerHTML = output;
137+
Prism.highlightElement(output_container);
138+
return true;
48139
}
49140

50141
</script>
142+
51143
<script>
52144
function showOutput() {
53145
var show = document.getElementById("output-code");
@@ -65,15 +157,20 @@
65157
<h3> Sample Group call</h3>
66158
<div class="sample-form">
67159
<label for="name">Name:</label>
68-
<input type="text" id="name">
69-
<label for="industry">Title:</label>
70-
<input type="text" id="industry">
160+
<input type="text" id="name" value="Twilio" required>
161+
<span class="error-message" id="name-error">This field is required.</span>
162+
<label for="industry">Industry:</label>
163+
<input type="text" id="industry" value="Software">
164+
<span class="error-message" id="industry-error">Please enter a valid industry name, using only letters and hyphens.</span>
71165
<label for="employees">Employees:</label>
72-
<input type="text" id="employees">
166+
<input type="text" id="employees" value="20000">
167+
<span class="error-message" id="employees-error">Please enter a valid number of employees.</span>
73168
<label for="plan">Plan:</label>
74-
<input type="text" id="plan">
169+
<input type="text" id="plan" value="Premium">
170+
<span class="error-message" id="plan-error">This field is required.</span>
75171
<label for="totalBilled">Total Billed:</label>
76-
<input type="text" id="totalBilled">
172+
<input type="text" id="totalBilled" value="34000000">
173+
<span class="error-message" id="billed-error">Please enter only numbers in the Total Billed field.</span>
77174
<input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()"
78175
value="See a sample group call">
79176
</div>

0 commit comments

Comments
 (0)