jQWidgets Mobile Demos

Show Demo List
Theme:
Demo
View Source
API Reference
<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name="msapplication-tap-highlight" content="no" />
    <title id='Description'>JavaScript Validator - Mobile Example</title>
    <link rel="stylesheet" href="../styles/demo.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.android.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../simulator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <style type="text/css">
        .register-table td,
        .register-table tr {
            margin: 0px;
            padding: 2px;
            border-spacing: 0px;
            border-collapse: collapse;
            font-size: 16px;
            white-space: nowrap;
        }
        .register-table {
            width: 100%;
            height: 100%;
        }
        .terms .jqx-validator-error-label {
            text-align: center;
        }
        .jqx-validator-error-label {
           font-size: 14px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = prepareSimulator("validator");
            $("#register").jqxExpander({ theme: theme, toggleMode: 'none', height: '100%', width: '100%', showArrow: false });
            $('#sendButton').jqxButton({ theme: theme, width: '50%' });
            $('#acceptInput').jqxCheckBox({ theme: theme, boxSize: 19, width: '50%' });
            $('#sendButton').on('click', function () {
                $('#testForm').jqxValidator('validate');
            });
            $('.text-input').jqxInput({ theme: theme, width: '100%', height: 30 });
            // initialize validator.
            $('#testForm').jqxValidator({
                hintType: 'label',
                animationDuration: 0,
                rules: [
                       { input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
                       { input: '#userInput', message: 'Between 3 and 12 characters are required!', action: 'keyup, blur', rule: 'length=3,12' },
                       { input: '#passwordInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
                       { input: '#passwordInput', message: 'Between 4 and 12 characters are required!', action: 'keyup, blur', rule: 'length=4,12' },
                       { input: '#passwordConfirmInput', message: 'Password is required!', action: 'keyup, blur', rule: 'required' },
                       {
                           input: '#passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus', rule: function (input, commit) {
                               // call commit with false, when you are doing server validation and you want to display a validation error on this field. 
                               if (input.val() === $('#passwordInput').val()) {
                                   return true;
                               }
                               return false;
                           }
                       },
                       { input: '#emailInput', message: 'E-mail is required!', action: 'keyup, blur', rule: 'required' },
                       { input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' },
                       { input: '#acceptInput', message: 'You have to accept the terms', action: 'change', rule: 'required', position: 'center' }]
            });
            initSimulator("validator");
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id="demoContainer" class="device-mobile">
        <div id="container" class="device-mobile-container">
            <div id="register">
                <div>
                    Register
                </div>
                <div style="overflow: hidden;">
                    <form id="testForm" action="./">
                        <table class="register-table">
                            <tr>
                                <td>Username:</td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" id="userInput" class="text-input" /></td>
                            </tr>
                            <tr>
                                <td>Password:</td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="password" id="passwordInput" class="text-input" /></td>
                            </tr>
                            <tr>
                                <td>Confirm password:</td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="password" id="passwordConfirmInput" class="text-input" /></td>
                            </tr>
                            <tr>
                                <td>E-mail:</td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" id="emailInput" placeholder="someone@mail.com" class="text-input" /></td>
                            </tr>
                            <tr>
                                <td class="terms" colspan="2" style="text-align: center; padding: 5px;">
                                    <div id="acceptInput" style="margin-top: 30px; left: -65px; position: relative; margin-left: 50%;" >I accept terms</div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="text-align: center;">
                                    <input type="button" value="Send" id="sendButton" /></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
jQWidgets Mobile Demos

Web UI Widgets
