Help and Info

On this page: Help, Info, Live Validation, Tooltips, Required Fields
Project Name, E-mail and Permanent E-mail fields have tooltips. Just hover mouse over label for thouse items.
</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Help and Info</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		var myForm, formData;
		var myForm2;
		function doOnLoad() {
			formData = [
				{type: "settings", position: "label-left", labelWidth: 130, inputWidth: 250, noteWidth: 250},
				{type: "label", label: "Init from JSON", labelWidth: "auto"},
				{type: "input", name: "prj_name", label: "Project Name", value: "My Project", tooltip: "Enter your Project Name here", required: true, info: true, note: {
					text: "Enter your project name here. This fields is required."
				}},
				{type: "input", name: "prj_descr", label: "Project Description", value: "My project is great!", rows: 3, note: {
					text: "Enter your project description. It should reflect your project basic purposes. This fields is not required but also important."
				}},
				{type: "input", name: "email", label: "E-mail", value: "", tooltip: "Please enter your valid e-mail address", validate: "ValidEmail", required: true, note: {
					text: "Your valid email address to complete registartion. You will receive account activating instructions on this email."
				}},
				{type: "input", name: "email2", label: "Confirm e-mail", value: "", validate: "ValidEmail", required: true, note: {
					text: "Confirm your valid email address just to be sure it correct."
				}},
				{type: "select", name: "acc_type", label: "Account type", info: true, required: true,
					note: {
						text: "Specify type of account you need. Information regarding account features can be found <a href='javascript:void(0);' style='color:gray;'>here</a>."
					},
					options: [
						{text: "Free limited account", value: "free"},
						{text: "Standard functionality", value: "std", selected: true},
						{text: "Standard+ functionality", value: "stdplus"},
						{text: "Full-featured account", value: "full"}
					]
				},
				{type: "calendar", dateFormat: "%Y-%m-%d %H:%i", name: "valid_until", label: "Valid Until", value:"2014-01-01 02:35", enableTime: true, calendarPosition: "right", info: true, note: {
					text:"Please specify date your project will valid until for."
				}},
				{type: "checkbox", name: "email_perm", label: "Permanent E-mail", info: true, tooltip: "Use this email as permanent e-mail address to contact me", note: {
					text: "Mark this checkbox if you want to use this email account as permanent email address to contact you."
				}},
				{type: "button", value: "Submit"}
			];
			myForm = new dhtmlXForm("myForm", formData);
			myForm.enableLiveValidation(true);
			myForm.attachEvent("onInfo", function(name){

			});

			myForm2 = new dhtmlXForm("myForm2");
			myForm2.loadStruct("../common/dhxform_infonote.xml");
			myForm2.enableLiveValidation(true);
		}
	</script>
</head>
<body onload="doOnLoad();">
	<table>
		<tr>
			<td style="padding-right: 20px;"><div id="myForm"></div></td>
			<td><div id="myForm2"></div></td>
		</tr>
	</table>
	<div style="padding-top: 20px;">
		On this page: Help, Info, Live Validation, Tooltips, Required Fields
	</div>
	<div style="padding-top: 20px;">
		<u>Project Name</u>, <u>E-mail</u> and <u>Permanent E-mail</u> fields have tooltips. Just hover mouse over label for thouse items.
	</div>
</body>
</html>
Documentation

Check documentation to learn how to use the components and easily implement them in your applications.