ript type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxExpander.
            $("#createAccount").jqxExpander({  toggleMode: 'none', width: '350px', showArrow: false });
            // Create jqxInput.
            $("#firstName").jqxInput({  width: '300px', height: '20px' });
            $("#lastName").jqxInput({  width: '300px', height: '20px'});
            $("#userName").jqxInput({  width: '300px', height: '20px' });
            // Create jqxPasswordInput.
            $("#password").jqxPasswordInput({  width: '300px', height: '20px', showStrength: true, showStrengthPosition: "right" });
            $("#passwordConfirm").jqxPasswordInput({  width: '300px', height: '20px' });
            // Create jqxDateTimeInpput.
            $("#birthday").jqxDateTimeInput({  width: '300px', height: '20px' });
            // Create jqxDropDownList.
            var genders = ["male", "female"];
            $("#gender").jqxDropDownList({  source: genders, selectedIndex: -1, width: '300px', height: '20px', promptText: "I am...", dropDownHeight: "50px" });
            // Create jqxButton.
            $("#submit").jqxButton({ theme: theme });
            // Create jqxValidator.
            $("#form").jqxValidator({
                rules: [
                        {
                            input: "#firstName", message: "First name is required!", action: 'keyup, blur', rule: function (input, commit) {
                                return input.val() != "" && input.val() != "First";
                            }
                        },
                        {
                            input: "#lastName", message: "Last name is required!", action: 'keyup, blur', rule: function (input, commit) {
                                return input.val() != "" && input.val() != "Last";
                            }
                        },
                        { input: "#userName", message: "Username is required!", action: 'keyup, blur', rule: 'required' },
                        { input: "#password", message: "Password is required!", action: 'keyup, blur', rule: 'required' },
                        { input: "#passwordConfirm", message: "Password is required!", action: 'keyup, blur', rule: 'required' },
                        {
                            input: "#passwordConfirm", message: "Passwords should match!", action: 'keyup, blur', rule: function (input, commit) {
                                var firstPassword = $("#password").jqxPasswordInput('val');
                                var secondPassword = $("#passwordConfirm").jqxPasswordInput('val');
                                return firstPassword == secondPassword;
                            }
                        },
                        {
                            input: "#gender", message: "Gender is required!", action: 'blur', rule: function (input, commit) {
                                var index = $("#gender").jqxDropDownList('getSelectedIndex');
                                return index != -1;
                            }
                        }
                ],  hintType: "label"
            });
            // Validate the Form.
            $("#submit").click(function () {
                $('#form').jqxValidator('validate');
            });
            // Update the jqxExpander's content if the validation is successful.
            $('#form').on('validationSuccess', function (event) {
                $("#createAccount").jqxExpander('setContent', '<span style="margin: 10px;">Account created.</span>');
            });
        });
    </script>
</head>
<body>
    <div id="createAccount" style="font-family: Verdana; font-size: 13px;">
        <div>
            Create a new account
        </div>
        <div style="font-family: Verdana; font-size: 13px;">
            <form id="form" style="overflow: hidden; margin: 10px;" action="./">
                <table>
                    <tr>
                        <td colspan="2">First Name
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="firstName" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">Last Name
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="lastName" />
                        </td>

                    </tr>
                    <tr>
                        <td colspan="2">Choose your username
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input id="userName" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">Create a password
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input id="password" type="password" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">Confirm your password
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input id="passwordConfirm" type="password" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">Birthday
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div id="birthday">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">Gender
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div id="gender">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input id="submit" type="button" value="Create account" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>