1+ <!DOCTYPE html>
2+ < html >
3+ < head >
4+ < meta charset ="utf-8 " />
5+ < title > Form Test</ title >
6+ < link rel ="stylesheet " href ="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css " />
7+ < style >
8+
9+ /* Form and inputs */
10+ form {
11+ width : 500px ;
12+ padding : 20px ;
13+ }
14+
15+ input .form-control {
16+ width : 375px ;
17+ }
18+
19+ /* While server is being requested */
20+ form .validating-server-side {
21+ background : # F2F2F2 ;
22+ opacity : 0.7 ;
23+ }
24+
25+ /* modify inputs for password strength */
26+ .password-strength input .form-control {
27+ width : 375px ;
28+ margin-right : 4px ;
29+ display : inline;
30+ }
31+
32+ .password-strength label {
33+ display : block;
34+ }
35+
36+ /* Checkboxes */
37+ .form-group .check-boxes input {
38+ margin-left : 10px ;
39+ }
40+
41+ </ style >
42+ </ head >
43+ < body >
44+ < div >
45+ < form action ="" id ="test-form " role ="form ">
46+ < div class ="form-group ">
47+ < label class ="control-label " for ="inline-suggestions "> Inline suggestions</ label >
48+ < input type ="text " id ="inline-suggestions " class ="form-control " data-suggestions ="Monkey, Horse, Fox, Tiger, Elephant " />
49+ </ div >
50+
51+ < div class ="form-group ">
52+ < label class ="control-label " for ="country-suggestions "> Country suggestions</ label >
53+ < input type ="text " id ="country-suggestions " class ="form-control " />
54+ </ div >
55+
56+ < div class ="form-group ">
57+ < label class ="control-label " for ="country-suggestions "> Swedish county suggestions</ label >
58+ < input type ="text " id ="swedish-county-suggestions " class ="form-control " />
59+ </ div >
60+
61+ < div class ="form-group password-strength ">
62+ < label class ="control-label " for ="password "> Display password strength (only strong)</ label >
63+ < input type ="password " id ="password " class ="form-control " data-validation ="strength " data-validation-strength ="3 " />
64+ </ div >
65+
66+ < div class ="form-group ">
67+ < label class ="control-label "> Alphanumeric and -_ and spaces</ label >
68+ < input class ="form-control " name ="test " data-validation ="alphanumeric " data-validation-allowing ="-_ " />
69+ </ div >
70+
71+ < div class ="form-group ">
72+ < label class ="control-label "> Alphanumeric only</ label >
73+ < input class ="form-control " name ="test2 " data-validation ="alphanumeric " />
74+ </ div >
75+
76+ < div class ="checkbox ">
77+ < label >
78+ < input type ="checkbox " data-validation ="required " /> Must be checked
79+ </ label >
80+ </ div >
81+
82+ < div class ="form-group ">
83+ < label class ="control-label "> Even numbers only</ label >
84+ < input class ="form-control " name ="test4 " data-validation ="even_number " />
85+ </ div >
86+
87+ < div class ="form-group ">
88+ < label class ="control-label "> Optional Server validation</ label >
89+ < input class ="form-control " name ="code "
90+ data-validation-help ="The word is "secret" "
91+ data-validation-optional ="true "
92+ data-validation ="server "
93+ data-validation-url ="http://formvalidator.net/validate-email.php " />
94+ </ div >
95+
96+ < div class ="form-group ">
97+ < label class ="control-label "> File validation</ label >
98+ < input type ="file " name ="some-file " class ="form-control "
99+ data-validation ="size mime "
100+ data-validation-allowing ="jpg, png, ico "
101+ data-validation-max-size ="100kb " />
102+ </ div >
103+
104+ < div class ="form-group ">
105+ < label class ="control-label ">
106+ Callback validation, set this value to "1" and
107+ validation will fail
108+ </ label >
109+ < input id ="callback " class ="form-control " />
110+ </ div >
111+
112+ < div class ="form-group check-boxes ">
113+ < label > Checkbox group</ label > < br />
114+ < label >
115+ < input type ="checkbox " name ="box " value ="1 "
116+ data-validation ="checkbox_group "
117+ data-validation-qty ="1-2 " /> 1
118+ </ label >
119+ < label >
120+ < input type ="checkbox " name ="box " value ="2 " /> 2
121+ </ label >
122+ < label >
123+ < input type ="checkbox " name ="box " value ="3 " /> 3
124+ </ label >
125+ < label >
126+ < input type ="checkbox " name ="box " value ="4 " /> 4
127+ </ label >
128+ < label >
129+ < input type ="checkbox " name ="box " value ="5 " /> 5
130+ </ label >
131+ </ div >
132+ < p >
133+ < input type ="submit " class ="button ">
134+ </ p >
135+ </ form >
136+ </ div >
137+ < script src ="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "> </ script >
138+ < script src ="jquery.form-validator.js "> </ script >
139+ < script src ="//code.jquery.com/qunit/qunit-1.12.0.js "> </ script >
140+ < script >
141+ ( function ( $ ) {
142+
143+ var dev = window . location . hash . indexOf ( 'dev' ) > - 1 ? '.dev' : '' ;
144+
145+ $ . validationSetup ( {
146+ language : {
147+ requiredFields : 'Du måste bocka för denna'
148+ } ,
149+ errorMessagePosition : 'top' ,
150+ scrollToTopOnError : true ,
151+ modules : 'security' + dev + ', location' + dev + ', sweden' + dev + ', file' + dev + ', uk' + dev ,
152+ onModulesLoaded : function ( $form ) {
153+ $ ( '#country-suggestions' ) . suggestCountry ( ) ;
154+ $ ( '#swedish-county-suggestions' ) . suggestSwedishCounty ( ) ;
155+ $ ( '#password' ) . displayPasswordStrength ( ) ;
156+ } ,
157+ onValidate : function ( ) {
158+ var $callbackInput = $ ( '#callback' ) ;
159+ if ( $callbackInput . val ( ) == 1 ) {
160+ return {
161+ element : $callbackInput ,
162+ message : 'This validation was made in a callback'
163+ } ;
164+ }
165+ } ,
166+ onError : function ( ) {
167+ if ( ! $ . formUtils . haltValidation ) {
168+ alert ( 'Invalid' ) ;
169+ }
170+ } ,
171+ onSuccess : function ( ) {
172+ alert ( 'Valid' ) ;
173+ return false ;
174+ }
175+ } ) ;
176+
177+ // Load one module outside $.validationSetup() even though you do not have to
178+ $ . formUtils . loadModules ( 'date' + dev + '.js' , false , false ) ;
179+
180+ // Add a new validator
181+ $ . formUtils . addValidator ( {
182+ name : 'even_number' ,
183+ validatorFunction : function ( value , $el , config , language , $form ) {
184+ return parseInt ( value , 10 ) % 2 === 0 ;
185+ } ,
186+ borderColorOnError : '' ,
187+ errorMessage : 'You have to give an even number' ,
188+ errorMessageKey : 'badEvenNumber'
189+ } ) ;
190+
191+ } ) ( jQuery ) ;
192+ </ script >
193+ < body >
194+ </ html >
0 commit comments