Ajax Loader
HTML 
 
1
 
2
<!DOCTYPE HTML>
3
<html lang="en">
4
<head>
5
    <meta charset="UTF-8">
6
    <title>Total Form Validation</title>
7
  <link rel="stylesheet" href="fv.css" type="text/css" />
8
  <!--[if IE]>
9
  <style>
10
    .item .tooltip .content{ display:none; opacity:1; }
11
    .item .tooltip:hover .content{ display:block; }
12
  </style>
13
  <![endif]-->
14
</head>
15
<body>
16
 
17
18
  <div id='wrap'>
19
    <div class='options'>
20
      <label>
21
        <input type='checkbox' id='vfields' />
22
        Vertical orientation
23
      </label>
24
      <label>
25
        <input type='checkbox' id='alerts' />
26
        Disable alerts
27
      </label>
28
    </div>
29
    <h1 title='how forms should be done.'>Forms: validation, styling &amp; semantics</h1>
30
    <section class='form'>
31
      <form action="" method="post" novalidate>
32
        <fieldset>
33
          <div class="item">
34
            <label>
35
              <span>Name</span>
36
              <input data-validate-length-range="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" type="text" />
37
            </label>
38
            <div class='tooltip help'>
39
              <span>?</span>
40
              <div class='content'>
41
                <b></b>
42
                <p>Name must be at least 2 words</p>
43
              </div>
44
            </div>
45
          </div>
46
          <div class="item">
47
            <label>
48
              <span>Occupation</span>
49
              <input class='optional' name="occupation" data-validate-length-range="5,20" type="text" />
50
            </label>
51
            <div class='tooltip help'>
52
              <span>?</span>
53
              <div class='content'>
54
                <b></b>
55
                <p>An optional field. This field is only validated when it has a value.<br /><em>Minimum 5 chars for this example.</em></p>
56
              </div>
57
            </div>
58
                        <span class='extra'>(optional)</span>
59
          </div>
60
          <div class="item">
61
            <label>
62
              <span>email</span>
63
              <input name="email" class='email' required="required" type="email" />
64
            </label>
65
          </div>
66
          <div class="item">
67
            <label>
68
              <span>Confirm email address</span>
69
              <input type="email" class='email' name="confirm_email" data-validate-linked='email' required='required'>
70
            </label>
71
          </div>
72
          <div class="item">
73
            <label>
74
              <span>Number</span>
75
              <input type="number" class='number' name="number" data-validate-minmax="10,100" data-validate-pattern="numeric" required='required'>
76
            </label>
77
            <div class='tooltip help'>
78
              <span>?</span>
79
              <div class='content'>
80
                <b></b>
81
                <p>Number must be between 10 and 100</p>
82
              </div>
83
            </div>
84
          </div>
85
          <div class="item">
86
            <label>
87
              <span>Date</span>
88
              <input class='date' type="date" name="date" required='required'>
89
            </label>
90
          </div>
91
          <div class="item">
92
            <label>
93
              <span>Password</span>
94
              <input type="password" name="password" data-validate-length="6,8" required='required'>
95
            </label>
96
            <div class='tooltip help'>
97
              <span>?</span>
98
              <div class='content'>
99
                <b></b>
100
                <p>Should be of length 6 OR 8 characters</p>
101
              </div>
102
            </div>
103
          </div>
104
          <div class="item">
105
            <label>
106
              <span>Repeat password</span>
107
              <input type="password" name="password2" data-validate-linked='password' required='required'>
108
            </label>
109
          </div>
110
          <div class="item">
111
            <label>
112
              <span>Telephone</span>
113
              <input type="tel" class='tel' name="phone" required='required' data-validate-length-range="8,20">
114
            </label>
115
            <div class='tooltip help'>
116
              <span>?</span>
117
              <div class='content'>
118
                <b></b>
119
                <p>Notice that for a phone number user can input a '+' sign, a dash '-' or a space ' '</p>
120
              </div>
121
            </div>
122
          </div>
123
          <div class="item">
124
            <label>
125
              <span>Drop down selection</span>
126
              <select class="required" name="dropdown">
127
                <option value="">-- none --</option>
128
                <option value="o1">Option 1</option>
129
                <option value="o2">Option 2</option>
130
                <option value="o3">Option 3</option>
131
              </select>
132
            </label>
133
            <div class='tooltip help'>
134
              <span>?</span>
135
              <div class='content'>
136
                <b></b>
137
                <p>Choose something or choose not. what shall it be?</p>
138
              </div>
139
            </div>
140
          </div>
141
          <div class="item">
142
            <label>
143
              <span>url</span>
144
              <input name="url" placeholder="http://www.website.com" required="required" type="url" />
145
            </label>
146
          </div>
147
          <div class="item multi required">
148
            <label for='multi_first'>
149
              <span>Multifield</span>
150
            </label>
151
            <div class='input'>
152
              <input type="text" name="multi1" maxlength='4' id='multi_first'>
153
              <input type="text" name="multi2" maxlength='4'>
154
              <input type="text" name="multi3" maxlength='4'>
155
              <input type="text" name="multi4" maxlength='4'>
156
              <input type="text" name="multi5" maxlength='4'>
157
              <input type="text" name="multi6" maxlength='4'>
158
              <input data-validate-length-range="24" data-validate-pattern="alphanumeric" id="serial" name="serial" type="hidden" required='required' />
159
            </div>
160
            <div class='tooltip help'>
161
              <span>?</span>
162
              <div class='content'>
163
                <b></b>
164
                <p>This is a multifield, which let the user input a serial number or credit card number for example, and the trick is to validate the combined result, which is stored in a hidden field</p>
165
              </div>
166
            </div>
167
          </div>
168
          <div class="item">
169
            <label>
170
              <span>message</span>
171
              <textarea required="required" name='message'></textarea>
172
            </label>
173
          </div>
174
        </fieldset>
175
        <fieldset>
176
          <p>There is a hidden "Required" form field below, notice it will not be validated due to its lack of visibility. The reason for this is that sometimes there is a section in a form that is not visible until some action is taken, but you do not want to change all those fields' "required" attributes on-the-fly, so that is why.</p>
177
          <input name="somethingHidden" required="required" type="text" style='display:none' />
178
        </fieldset>
179
        <button id='send' type='submit'>Submit</button>
180
      </form>
181
    </section>
182
  </div>
183
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
184
    <script src="http://dropthebit.com/demos/validator/multifield.js"></script>
185
    <script src="http://dropthebit.com/demos/validator/validator.js"></script>
186
  <script>
187
    // initialize the validator function
188
    validator.message['date'] = 'not a real date';
189
190
    // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
191
    $('form')
192
      .on('blur', 'input[required], input.optional, select.required', validator.checkField)
193
      .on('change', 'select.required', validator.checkField);
194
195
    $('.multi.required')
196
      .on('keyup', 'input', function(){
197
        validator.checkField.apply( $(this).siblings().last()[0] );
198
      }).on('blur', 'input', function(){
199
        validator.checkField.apply( $(this).siblings().last()[0] );
200
      });
201
202
    // bind the validation to the form submit event
203
    //$('#send').click('submit');//.prop('disabled', true);
204
205
    $('form').submit(function(e){
206
      e.preventDefault();
207
      var submit = true;
208
      // evaluate the form using generic validaing
209
      if( !validator.checkAll( $(this) ) ){
210
        submit = false;
211
      }
212
 
213
      if( submit )
214
        this.submit();
215
      return false;
216
    });
217
218
    /* FOR DEMO ONLY */
219
    $('#vfields').change(function(){
220
      $('form').toggleClass('mode2');
221
    }).prop('checked',false);
222
223
    $('#alerts').change(function(){
224
      validator.defaults.alerts = (this.checked) ? false : true;
225
      if( this.checked )
226
        $('form .alert').remove();
227
    }).prop('checked',false);
228
  </script>
229
</body>
230
</html>
 
CSS 
html, body{ height:100%; }
1
html, body{ height:100%; }
2
/* body min-width is 992px because it's 960px grid + extra 16px from each side of the header */
3
body{ min-width:960px; color:#444; background-color:#F1F1F1; font-size:12px; line-height:1.5em; font-family:Arial, Helvetica, sans-serif; }
4
 
5
html, body, div, span, object, iframe,
6
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
8
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
9
fieldset, form, label, legend,
10
table, caption, tbody, tfoot, thead, tr, th, td,
11
article, aside, canvas, details, figcaption, figure,
12
footer, header, hgroup, menu, nav, section, summary,
13
time, mark, audio, video {
14
    margin:0;
15
    padding:0;
16
    border:0;
17
    vertical-align:baseline;
18
}
19
 
20
small{ font-size:0.9em; }
21
 
22
article, aside, details, figcaption, figure,
23
footer, header, hgroup, menu, nav, section {
24
    display:block;
25
}
26
 
27
h1{ font-size:2em; margin:0 0 50px 0; }
28
button{ cursor:pointer; }
29
p{ padding:5px 0; }
30
 
31
a{ text-decoration:none; }
32
.btn{ margin:5px; font-size:1.3em; font-weight:bold; border:2px solid rgba(0,0,0,0.2); display:inline-block; box-shadow:0 -30px 30px -15px #00329B inset, 0 1px 0 rgba(255,255,255,0.3) inset; background:#0088CC; background-repeat:repeat-x; color:#FFF; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); border-radius:7px; padding:10px 20px; -webkit-transition:0.15s; transition:0.15s; }
33
.btn:hover{ background:#0068BA; }
34
.btn:active{ box-shadow:0 0 0 0 rgba(0, 0, 0, 0.3), 0 -30px 30px -15px #00329B inset, 0 0 6px #00243F inset; }
35
.btn.github{ float:right; }
36
 
37
#wrap{ padding:50px; width:860px; background-color:#FFF; margin:20px auto; border:1px dashed #AAA; position:relative; }
38
.options{ position:absolute; top:-1px; right:-1px; background-color:#F1F1F1; padding:4px 0; border-left:1px dashed #AAA; border-bottom:1px dashed #AAA; }
39
  .options label{ cursor:pointer; margin:0 10px; }
40
 
41
input, textarea{ border:1px solid #D1D1D1; }
42
input, select{ font-size:inherit; margin:0; }
43
input:focus, textarea:focus{ border-color:#AAA; }
44
 
45
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
46
input[type=checkbox]{ border:none; bottom:-1px; cursor:pointer; margin:0 5px 0 0; position:relative; }
47
button[type=submit]{ font-size:1.1em; padding:5px 25px; }
48
 
49
/* Tooltips helpers */
50
.item .tooltip{ float:left; top:2px; left:7px; position:relative; z-index:2; }
51
.item .tooltip:hover{ z-index:3; }
52
   .item .tooltip > span{ display:inline-block; width:16px; height:16px; line-height:16px; font-size:0.9em; font-weight:bold; text-align:center; color:#FFF; cursor:help; background-color:#00AEEF; position:relative; border-radius:10px; }
53
    .item .tooltip .content{ opacity:0; width:200px; background-color:#333; color:#FFF; font-size:0.9em; position:absolute; top:0; left:20px; padding:8px; border-radius:6px; pointer-events:none; transition:0.2s cubic-bezier(0.1, 0.1, 0.25, 2); -webkit-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); -moz-transition:0.3s cubic-bezier(0.1, 0.2, 0.5, 2.2); }
54
        .item .tooltip p{ padding:0; }
55
   .item .tooltip.down .content{ left:auto; right:0; top:30px; }
56
   .item .tooltip:hover .content{ opacity:1; left:36px; }
57
      .item .tooltip .content b{ height:0; width:0; border-color:#333 #333 transparent transparent; border-style:solid; border-width:9px 7px; position:absolute; left:-14px; top:8px; }
58
        .item .tooltip.down .content b{ left:auto; right:6px; top:-10px; border-width:5px; border-color:transparent #333 #333 transparent; }
59
 
60
/* alerts (when validation fails) */
61
.item .alert{ float:left; margin:0 0 0 20px; padding:3px 10px; position:relative; color:#FFF; border-radius:3px 4px 4px 3px; background-color:#CE5454; max-width:170px; white-space:pre; z-index:1; }
62
.item .alert::after{ content:''; display:block; height:0; width:0; border-color:transparent #CE5454 transparent transparent; border-style:solid; border-width:11px 7px; position:absolute; left:-13px; top:1px; }
63
 
64
@keyframes shake{
65
    25%{ transform:translateX(-6px); }
66
    75%{ transform:translateX(6px); }
67
}
68
@-webkit-keyframes shake{
69
    25%{ -webkit-transform:translateX(-6px); }
70
    75%{ -webkit-transform:translateX(6px); }
71
}
72
 
73
form fieldset{ clear:both; margin:0 0 10px 0; }
74
form .item{ padding:5px 0; position:relative; height:2em; }
75
form .item.items{ height:auto; }
76
  .item label{ float:left; }
77
    .item label span{ float:left; width:160px; text-transform:capitalize; line-height:2em; }
78
  .item input, .item textarea{ float:left; padding:3px 4px; width:210px; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s; }
79
  .item input{  }
80
  .item input.short{ width:90px; }
81
  .item input:focus:not([type="checkbox"]), .item textarea:focus{ box-shadow:0 0 4px #00AEEF; border:1px solid #00AEEF; }
82
  .item textarea{  }
83
  .item select{ float:left; width:220px; padding:2px 0; margin:0; border:1px solid #CCC; text-transform:capitalize; }
84
    .item select option{ padding:1px; }
85
 
86
    .item > .extra{ float:left; font-size:0.9em; color:#999; line-height:2em; margin-left:13px; }
87
  
88
  .item.multi .input{ float:left; }
89
    .item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
90
    form .item.multi input:nth-last-child(-n+2){ margin:0; }
91
  .item.items input{ border-top:5px solid #E1E1E1; margin:0 0 0 160px; }
92
93
  .bad input[required=required], .bad input.optional, .bad select, .bad textarea{ border:1px solid #CE5454; box-shadow:0 0 4px -2px #CE5454; position:relative; left:0; -moz-animation:.3s 2 shake linear; -webkit-animation:0.3s 2 shake linear; }
94
  
95
/* mode2 - where the label's text is above the field and not next to it
96
--------------------------------------------------------------------------- */
97
.mode2 .item{ float:left; clear:left; margin-bottom:30px; height:auto; padding:0; zoom:1; }
98
.mode2 .item.bad{ margin-bottom:8px; }
99
.mode2 .item::before, .mode2 .item::after{ content:''; display:table; }
100
.mode2 .item::after{ clear:both; }
101
  .mode2 .item label{  }
102
    .mode2 .item label span{ float:none; display:block; line-height:inherit; }
103
  .mode2 .item input, .item textarea{ width:250px; margin:0; }
104
  .mode2 .item textarea{ width:350px; margin:0; }
105
  .mode2 .item select{ width:260px; float:none; }
106
  .mode2 .item.multi label{ float:none; }
107
  .mode2 .item.multi input{ float:left; margin-right:5px; width:35px; text-align:center; }
108
  .mode2 .item .tooltip{ left:auto; position:absolute; right:-22px; top:19px; }
109
  .mode2 .item .alert::after{ display:none; }
110
  .mode2 .item .alert{ float:none; clear:left; margin:0; padding:0 5px; border-radius:0 0 3px 3px; max-width:100%; height:22px; line-height:1.8em; }
111
    .mode2 .item > .extra{ position:absolute; right:0; }
 

Forms: validation, styling & semantics

CSSDeck G+