Skip to content

Commit 3c2e863

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 1c5e8c3 commit 3c2e863

File tree

6 files changed

+645
-118
lines changed

6 files changed

+645
-118
lines changed

‎docs/controls/form/form-overview.png

19 KB
Loading

‎docs/controls/form/get-started.md

Lines changed: 345 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,345 @@
1+
---
2+
title: Getting Started
3+
page_title: jQuery Form Documentation - Getting Started with the Form
4+
description: "Get started with the jQuery Form by Kendo UI and learn how to create, initialize, and enable the component."
5+
slug: getting_started_kendoui_form_widget
6+
position: 1
7+
---
8+
9+
# Getting Started with the Form
10+
11+
This guide demonstrates how to get up and running with the Kendo UI for jQuery Form.
12+
13+
After the completion of this guide, you will be able to achieve the following end result:
14+
15+
```dojo
16+
<form id="form"></form>
17+
18+
<script>
19+
$(document).ready(function () {
20+
$("#form").kendoForm({
21+
size: 'large',
22+
orientation: "horizontal",
23+
validatable: {
24+
validateOnBlur: true,
25+
validationSummary: true,
26+
errorTemplate: "<span>#=message#</span>"
27+
},
28+
formData: {
29+
Username: "Alex",
30+
Email: "[email protected]",
31+
Password: "pass123",
32+
Birth: new Date('03/06/2001'),
33+
City: 2
34+
},
35+
items: [
36+
{ field: "Username", label: "Username:", validation: { required: true } },
37+
{ field: "Email", label: "Email:", validation: { required: true, email: true } },
38+
{
39+
field: "Password",
40+
label: "Password:",
41+
validation: { required: true },
42+
hint: "Hint: enter alphanumeric characters only.",
43+
editor: function (container, options) {
44+
$('<input type="password" id="Password" name="' + options.field + '" title="Password" required="required" autocomplete="off" aria-labelledby="Password-form-label" data-bind="value: Password" aria-describedby="Password-form-hint"/>')
45+
.appendTo(container)
46+
.kendoTextBox();
47+
}
48+
},
49+
{
50+
field: "City",
51+
editor:"DropDownList",
52+
editorOptions:{
53+
dataTextField:"text",
54+
dataValueField:"id",
55+
dataSource: {
56+
data: [
57+
{ text:"Sofia", id:1 },
58+
{ text:"Bern", id: 2 },
59+
{ text:"Napoli", id:3 }
60+
]
61+
}
62+
}
63+
},
64+
{ field: "Birth", label: { text: "Date of birth:", optional: true }, format: 'dd MMMM yyyy'},
65+
],
66+
submit: function(e) {
67+
e.preventDefault();
68+
alert('Form submitted successfully');
69+
}
70+
});
71+
});
72+
</script>
73+
```
74+
75+
## 1. Create a Form Element
76+
77+
First, create an empty `<form>` element that you will use to initialize the component.
78+
79+
```html
80+
<form id="form"></form>
81+
```
82+
83+
## 2. Initialize the Form
84+
85+
In this step, you will initialize the Form from the `<form>` element.
86+
87+
```html
88+
<form id="form"></form>
89+
90+
<script>
91+
// Target the form element by using jQuery and then call the kendoForm() method.
92+
$("#form").kendoForm({
93+
// Add some basic configurations such as size.
94+
size: "large"
95+
});
96+
</script>
97+
```
98+
99+
## 3. Bind the Form to Data
100+
101+
Once the basic initialization is completed, you can start adding additional configurations to the Form. The first and most important configuration is the [`formData`](/api/javascript/ui/form/configuration/formdata).
102+
103+
```html
104+
<form id="form"></form>
105+
106+
<script>
107+
$("#form").kendoForm({
108+
size: 'large',
109+
orientation: "horizontal",
110+
formData: {
111+
Username: "Alex",
112+
Email: "[email protected]",
113+
Password: "pass123",
114+
Birth: new Date('03/06/2001'),
115+
City: 2
116+
}
117+
});
118+
</script>
119+
```
120+
121+
## 4. Add the Label and Hint Options
122+
123+
The Form allows you to configure each of the displayed items. For example, you can configure the [`label`](/api/javascript/ui/form/configuration/items#items.label) or add a [`hint`](/api/javascript/ui/form/configuration/items#items.hint).
124+
125+
```html
126+
<form id="form"></form>
127+
128+
<script>
129+
$("#form").kendoForm({
130+
size: 'large',
131+
orientation: "horizontal",
132+
formData: {
133+
Username: "Alex",
134+
Email: "[email protected]",
135+
Password: "pass123",
136+
Birth: new Date('03/06/2001'),
137+
City: 2
138+
},
139+
items: [
140+
{ field: "Username", label: "Username:" },
141+
{ field: "Email", label: "Email:"},
142+
{
143+
field: "Password",
144+
label: "Password:",
145+
hint: "Hint: enter alphanumeric characters only."
146+
},
147+
{ field: "City" },
148+
{ field: "Birth", label: { text: "Date of birth:", optional: true }, format: 'dd MMMM yyyy'},
149+
],
150+
});
151+
</script>
152+
```
153+
154+
## 5. Add Editors for the Form Items
155+
156+
The Form allows you to configure a specific editor for the displayed items. The example below demonstrates how to set one of the predefined [`editors'](/api/javascript/ui/form/configuration/items#itemseditor).
157+
However, you can also implement a [`custom editor`](https://docs.telerik.com/kendo-ui/controls/form/items#custom-editor) that will fit the needs of your application.
158+
159+
```html
160+
<form id="form"></form>
161+
162+
<script>
163+
$("#form").kendoForm({
164+
size: 'large',
165+
orientation: "horizontal",
166+
formData: {
167+
Username: "Alex",
168+
Email: "[email protected]",
169+
Password: "pass123",
170+
Birth: new Date('03/06/2001'),
171+
City: 2
172+
},
173+
items: [
174+
{ field: "Username", label: "Username:" },
175+
{ field: "Email", label: "Email:"},
176+
{
177+
field: "Password",
178+
label: "Password:",
179+
hint: "Hint: enter alphanumeric characters only.",
180+
editor: function (container, options) {
181+
$('<input type="password" id="Password" name="' + options.field + '" title="Password" autocomplete="off" aria-labelledby="Password-form-label" data-bind="value: Password" aria-describedby="Password-form-hint"/>')
182+
.appendTo(container)
183+
.kendoTextBox();
184+
}
185+
},
186+
{
187+
field: "City",
188+
editor:"DropDownList",
189+
editorOptions:{
190+
dataTextField:"text",
191+
dataValueField:"id",
192+
dataSource: {
193+
data: [
194+
{ text:"Sofia", id:1 },
195+
{ text:"Bern", id: 2 },
196+
{ text:"Napoli", id:3 }
197+
]
198+
}
199+
}
200+
},
201+
{ field: "Birth", label: { text: "Date of birth:", optional: true }, format: 'dd MMMM yyyy'},
202+
],
203+
});
204+
</script>
205+
```
206+
207+
## 6. Enable Validation
208+
209+
You can specify which of the items in the Form are required. The Form component also gives you the option to configure the built-in Validator options by setting the [`validatable`](/api/javascript/ui/form/configuration/validatable#validatable.validationSummary) options.
210+
211+
```html
212+
<form id="form"></form>
213+
214+
<script>
215+
$("#form").kendoForm({
216+
size: 'large',
217+
validatable: {
218+
validateOnBlur: true,
219+
validationSummary: true,
220+
errorTemplate: "<span>#=message#</span>"
221+
},
222+
formData: {
223+
Username: "Alex",
224+
Email: "[email protected]",
225+
Password: "pass123",
226+
Birth: new Date('03/06/2001'),
227+
City: 2
228+
},
229+
items: [
230+
{ field: "Username", label: "Username:", validation: { required: true } },
231+
{ field: "Email", label: "Email:", validation: { required: true, email: true } },
232+
{
233+
field: "Password",
234+
label: "Password:",
235+
validation: { required: true },
236+
hint: "Hint: enter alphanumeric characters only.",
237+
editor: function (container, options) {
238+
$('<input type="password" id="Password" name="' + options.field + '" title="Password" required="required" autocomplete="off" aria-labelledby="Password-form-label" data-bind="value: Password" aria-describedby="Password-form-hint"/>')
239+
.appendTo(container)
240+
.kendoTextBox();
241+
}
242+
},
243+
{
244+
field: "City",
245+
editor:"DropDownList",
246+
editorOptions:{
247+
dataTextField:"text",
248+
dataValueField:"id",
249+
dataSource: {
250+
data: [
251+
{ text:"Sofia", id:1 },
252+
{ text:"Bern", id: 2 },
253+
{ text:"Napoli", id:3 }
254+
]
255+
}
256+
}
257+
},
258+
{ field: "Birth", label: { text: "Date of birth:", optional: true }, format: 'dd MMMM yyyy'},
259+
],
260+
submit: function(e) {
261+
e.preventDefault();
262+
alert('Form submitted successfully');
263+
}
264+
});
265+
</script>
266+
```
267+
268+
## 7. Configure Form Orientation
269+
270+
The [`orientation`](/api/javascript/ui/form/configuration/orientation) of the Form can be easily changed by using the respective option.
271+
272+
```
273+
<form id="form"></form>
274+
275+
<script>
276+
$("#form").kendoForm({
277+
size: 'large',
278+
orientation: "horizontal",
279+
validatable: {
280+
validateOnBlur: true,
281+
validationSummary: true,
282+
errorTemplate: "<span>#=message#</span>"
283+
},
284+
formData: {
285+
Username: "Alex",
286+
Email: "[email protected]",
287+
Password: "pass123",
288+
Birth: new Date('03/06/2001'),
289+
City: 2
290+
},
291+
items: [
292+
{ field: "Username", label: "Username:", validation: { required: true } },
293+
{ field: "Email", label: "Email:", validation: { required: true, email: true } },
294+
{
295+
field: "Password",
296+
label: "Password:",
297+
validation: { required: true },
298+
hint: "Hint: enter alphanumeric characters only.",
299+
editor: function (container, options) {
300+
$('<input type="password" id="Password" name="' + options.field + '" title="Password" required="required" autocomplete="off" aria-labelledby="Password-form-label" data-bind="value: Password" aria-describedby="Password-form-hint"/>')
301+
.appendTo(container)
302+
.kendoTextBox();
303+
}
304+
},
305+
{
306+
field: "City",
307+
editor:"DropDownList",
308+
editorOptions:{
309+
dataTextField:"text",
310+
dataValueField:"id",
311+
dataSource: {
312+
data: [
313+
{ text:"Sofia", id:1 },
314+
{ text:"Bern", id: 2 },
315+
{ text:"Napoli", id:3 }
316+
]
317+
}
318+
}
319+
},
320+
{ field: "Birth", label: { text: "Date of birth:", optional: true }, format: 'dd MMMM yyyy'},
321+
],
322+
submit: function(e) {
323+
e.preventDefault();
324+
alert('Form submitted successfully');
325+
}
326+
});
327+
</script>
328+
```
329+
330+
331+
## Next Steps
332+
333+
* [Referencing Existing Component Instances]({% slug widget_methodsand_events_kendoui_installation %})
334+
* [Demo Page for the Form](https://demos.telerik.com/kendo-ui/form/index)
335+
336+
## See Also
337+
338+
* [JavaScript API Reference of the Form](/api/javascript/ui/form)
339+
* [Knowledge Base Section](/knowledge-base)
340+
341+
<script>
342+
window.onload = function() {
343+
document.getElementsByClassName("btn-run")[0].click();
344+
}
345+
</script>

0 commit comments

Comments
 (0)