forked from space10-community/conversational-form
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvalidation.html
executable file
·164 lines (136 loc) · 5.14 KB
/
validation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<link rel="stylesheet" href="build/conversational-form-docs.min.css">
<script type="text/javascript" src="https://cf-4053.kxcdn.com/conversational-form/0.9.6/conversational-form.min.js" crossorigin></script>
</head>
<body>
<script src="build/conversational-form-examples.min.js" id="examples-script"></script>
<main class="content">
<menu id="small-screen-menu">
<h2>Conversational Form examples</h2>
<div class="switch-btn">
<label class="switch">
<input type="checkbox" onclick="window.conversationalFormExamples.toggleConversation(event)">
<div class="slider round"></div>
</label>
</div>
<div class="hamburger-btn" onclick="window.conversationalFormExamples.toggleMenuState(event)">
<svg viewBox="0 0 29 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
<g transform="translate(-325.000000, -87.000000)" stroke="#FFFFFF" stroke-width="2">
<g transform="translate(325.000000, 87.000000)">
<path d="M27.4802431,7 L1.23827993,7"></path>
<path d="M27.4802431,1 L1.23827993,1"></path>
<path d="M27.4802431,13 L1.23827993,13"></path>
</g>
</g>
</g>
</svg>
</div>
</menu>
<div class="switch-btn" id="cf-toggle-btn" data-label="Enable Conversational Form" data-label-toggled="Disable Conversational Form">
<label class="switch">
<input type="checkbox" onclick="window.conversationalFormExamples.toggleConversation(event)">
<div class="slider round"></div>
</label>
</div>
<section id="info" role="info">
<div class="close-btn" onclick="window.conversationalFormExamples.toggleMenuState()">
<svg viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
<g transform="translate(-328.000000, -83.000000)" stroke="#FFFFFF" stroke-width="2">
<g id="close" transform="translate(329.000000, 84.000000)">
<path d="M19.6371966,19.2779351 L1.08132646,0.722064927"></path>
<path d="M19.4923318,0.722064927 L0.936461672,19.2779351"></path>
</g>
</g>
</g>
</svg>
</div>
<article>
<h1 id="writer">
Different validation strategies
</h1>
<h2>
Simple questions about Sherlock Holmes.
</h2>
</article>
</section>
<section role="form">
<div class="form-outer">
<!-- Conversational Form will auto-run because of attribute "cf-form" -->
<form id="form">
<fieldset cf-questions="What is sherlock holmes gender?">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="hen">Hen</label>
<input type="radio" name="gender" id="hen" value="hen"><br><br>
</fieldset>
<label for="firstname">
What is sherlocks holmes firstname?
</label>
<input
id="firstname"
name="firstname"
required
cf-error="Check flowStepCallback for hints"
/>
<input
type="text"
id="billing:firstname"
name="lastname"
cf-validation="window.lastnameCheck"
cf-questions="Put on the Sherlock Holmes hat to get past this step, and look at the custom validation method window.lastnameCheck"
cf-error="This value goes through the window.javascript method called lastnameCheck, check that for guide.."
>
</div>
</div>
</form>
</div>
</section>
<section id="cf-context" role="cf-context" cf-context>
</section>
</main>
<script>
var lastnameCheck = function(dto, success, error){
console.log("testValidation, dto:", dto, success, error);
if(dto.text.toLowerCase().indexOf("holmes") != -1)
return success();
return error();
};
window.onload = function(){
var conversationalForm = window.cf.ConversationalForm.startTheConversation({
formEl: document.getElementById("form"),
context: document.getElementById("cf-context"),
flowStepCallback: function(dto, success, error){
if(dto.tag.id == "firstname"){
if(dto.tag.value.toLowerCase() === "sherlock"){
return success();
}else{
return error();
}
//conversationalForm.stop("Stopping form, but added value");
}else if(dto.tag.name == "gender"){
if(dto.tag.value[0] === "male"){
return success();
}else{
return error();
}
}
return success();
},
submitCallback: function(){
// remove Conversational Form
alert("Custom submit callback reached, removing Conversational Form, see markup of this file")
}
});
};
</script>
</body>
</html>