formJS/demos.html at master · SimplySayHi/formJS · GitHub

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
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demos | formJS  - JavaScript Form Validation. Made Easy</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="Valerio Di Punzio">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Expletus+Sans:500|Raleway:200&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/doc.css">

    <script defer src="js/include.js"></script>
</head>

<body>

    <div id="top" class="container-fluid d-flex flex-column">

        <div id="menu" class="position-sticky text-right d-flex">
            <div class="position-raltive w-100">
                <a href="index.html" class="logo">f</a>
                <nav class="position-absolute nav-desktop d-none d-md-flex align-items-center">
                    <a href="index.html" class="p-2 m-2">Home</a>
                    <a href="get-started.html" class="p-2 m-2">Get Started</a>
                    <a href="api.html" class="p-2 m-2">API</a>
                    <a href="demos.html" class="p-2 m-2">Demos</a>
                    <a href="https://github.com/SimplySayHi/formJS" target="_blank" class="github-logo ml-2">
                        <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="28px" height="28px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
                            <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M16,0.112c-8.836,0-16,7.294-16,16.291 C0,23.6,4.584,29.706,10.942,31.86c0.801,0.148 1.093-0.354,1.093-0.785c0-0.387-0.015-1.412-0.021-2.771 c-4.451,0.984-5.39-2.184-5.39-2.184c-0.729-1.881-1.777-2.383-1.777-2.383c-1.452-1.01,0.11-0.99,0.11-0.99 .605,0.115,2.45,1.68,2.45,1.68c1.428,2.488,3.745,1.77,4.657,1.354c0.145-1.053,0.559-1.771,1.016-2.178 c-3.553-0.412-7.288-1.809-7.288-8.051c0-1.778,0.623-3.232,1.646-4.371c-0.164-0.412-0.713-2.068,0.157-4.311 c0,0,1.344-0.438,4.399,1.67c1.276-0.361,2.646-0.543,4.006-0.549c1.359,0.006,2.728,0.188,4.006,0.549 c3.056-2.108,4.396-1.67,4.396-1.67c0.873,2.242,0.323,3.898,0.159,4.311c1.024,1.139,1.644,2.593,1.644,4.371 c0,6.258-3.74,7.635-7.305,8.038c0.574,0.504,1.086,1.498,1.086,3.018c0,2.178-0.02,3.934-0.02,4.469 c0,0.436,0.288,0.941,1.101,0.783C27.421,29.7,32,23.598,32,16.403C32,7.406,24.837,0.112,16,0.112z" />
                        </svg>
                    </a>
                </nav>
                <div class="position-absolute dropdown d-inline-block d-md-none">
                    <button class="btn dropdown-toggle dropdown-red-outline py-0 px-2" data-toggle="dropdown" type="button">
                        menu
                    </button>
                    <span class="dropdown-menu">
                        <a class="dropdown-item" href="index.html">Home</a>
                        <a class="dropdown-item" href="get-started.html">Get Started</a>
                        <a class="dropdown-item" href="api.html">API</a>
                        <a class="dropdown-item" href="demos.html">Demos</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="https://github.com/SimplySayHi/formJS" target="_blank">View on Github</a>
                        <a class="dropdown-item" href="https://github.com/SimplySayHi/formJS/issues" target="_blank">Report a Bug</a>
                    </span>
                </div>
            </div>
        </div>

        <div class="page-content mt-5 pt-5">
            <h4 class="m-0 px-2">formJS</h4>
            <h1 class="border-0 m-0">Demos</h1>
            <div class="demos-list d-flex flex-wrap">

                <a href="demos/demo-basic-ajax-form.html">
                    Basic AJAX Form
                </a>

                <a href="demos/demo-basic-default-form.html">
                    Basic Default Form
                </a>

                <a href="demos/demo-add-custom-validation-errors.html">
                    Add Custom Validation Errors
                </a>

                <a href="demos/demo-add-custom-validation-rules.html">
                    Add Custom Validation Rules
                </a>

                <a href="demos/demo-groups-validation-basic.html">
                    Groups Validation Basic
                </a>

                <a href="demos/demo-groups-validation-onValidationCheckAll-1.html">
                    Groups Validation with onValidationCheckAll (1)
                </a>

                <a href="demos/demo-groups-validation-onValidationCheckAll-2.html">
                    Groups Validation with onValidationCheckAll (2)
                </a>

                <a href="demos/demo-change-global-options.html">
                    Change Global Options
                </a>

                <a href="demos/demo-get-form-data-complex.html">
                    Get Form Data <br />( Complex Structure )
                </a>

                <a href="demos/demo-data-field-options.html">
                    HTML Attribute <br />data-field-options
                </a>

                <a href="demos/demo-callback-before-validation.html">
                    Callback "beforeValidation"
                </a>

                <a href="demos/demo-option-validate-on-events.html">
                    Option "validateOnEvents"
                </a>

                <a href="demos/demo-events-callback.html">
                    Events Callback
                </a>

                <a href="demos/demo-show-error-messages-css.html">
                    Show Error Messages via CSS
                </a>

                <a href="demos/demo-show-error-messages-js.html">
                    Show Error Messages via JS
                </a>

                <a href="demos/demo-systemjs.html">
                    Usage via SystemJS 01
                </a>

                <a href="demos/demo-systemjs-2.html">
                    Usage via SystemJS 02
                </a>

                <a href="demos/demo-lite-version.html">
                    Lite Version
                </a>

            </div>
        </div>

        <footer class="text-center mt-5 pt-5 mb-3">
            <hr />
            <p class="small m-0">
                Made with passion by <a href="https://valeriodipunzio.com" target="_blank">Valerio Di Punzio</a>
            </p>
        </footer>

    </div>

</body>
</html>