Formats the phone number in the (111) 111 - 1111
format :
Formats the date in the dd / mm / yyyy
format:
Formats the credit card cvc:
Formats the credit card expiry date in the mm / yyyy
format:
Formats the credit card card number:
Formats the number:
Formats the postal code in the A1A 1A1
format:
Formats the Ontario Driver's License Number in the format A1234 - 12345 - 12345
:
Formats the Ontario Photo Health Card Number in the format 1234 - 123 - 123 - AB
:
Formats the Ontario Outdoors Card Number in the format 708158 123456789
:
Formats a time in years and months:
Useful for inputting time in years and months. For example, duration of employment or residency.
Formats the UK sort code:
jQuery(function($){ fields = ['credit_card_number', 'credit_card_expiry', 'credit_card_cvc', 'dd_mm_yyyy', 'yyyy_mm_dd', 'email', 'number', 'phone_number', 'postal_code', 'time_yy_mm', 'uk_sort_code', 'ontario_drivers_license_number', 'ontario_photo_health_card_number', 'ontario_outdoors_card_number'] $.each( fields, function (index, value) { $('input.'+value).formance('format_'+value) .addClass('form-control') .wrap('<div class=\'form-group\' />') .parent() .append('<label class=\'control-label\'>Try This Demo!</label>'); $('input.'+value).on('keyup change blur', function (value) { return function (event) { $this = $(this); if ($this.formance('validate_'+value)) { $this.parent() .removeClass('has-success has-error') .addClass('has-success') .children(':last') .text('Valid!'); } else { $this.parent() .removeClass('has-success has-error') .addClass('has-error') .children(':last') .text('Invalid'); } } }(value)); }); });
<div class='fields' id='phone_number'> <h4>North American Phone Number</h4> <p> <input type="text" class="phone_number" placeholder="Phone Number"> </p> <p>Formats the phone number in the <code>(111) 111 - 1111</code> format :</p> </div> <div class='fields' id='dd_mm_yyyy'> <h4>Date DD / MM / YYYY</h4> <p> <input type="text" class='dd_mm_yyyy' placeholder="Date DD / MM / YYYY"> </p> <p>Formats the date in the <code>dd / mm / yyyy</code> format:</p> </div> <div class='fields' id='yyyy_mm_dd'> <h4>Date YYYY / MM / DD</h4> <p> <input type="text" class='yyyy_mm_dd' placeholder="Date YYYY / MM / DD"> </p> <p>Similar to documentation of <a href='#dd_mm_yyyy'>dd / mm / yyyy</a> except the format is <code>yyyy / mm / dd</code>.</p> </div> <div class='fields' id='email'> <h4>Email (Simple Algorithm)</h4> <p><input type="text" class='email' placeholder="Email"></p> <h4>Email (Complex Algorithm)</h4> <p><input type="text" class='email' placeholder="Email" data-formance_algorithm="complex"></p> </div> <div class='fields' id='credit_card_cvc'> <h4>Credit Card CVC</h4> <p> <input type="text" class="credit_card_cvc" pattern="\d*" x-autocompletetype="cc-csc" placeholder="Security code" required autocomplete="off"> </p> <p>Formats the credit card cvc:</p> </div> <div class='fields' id='credit_card_expiry'> <h4>Credit Card Expiry</h4> <p> <input type="text" class="credit_card_expiry" pattern="\d*" x-autocompletetype="cc-exp" placeholder="Expires MM / YY" required maxlength="9"> </p> <p>Formats the credit card expiry date in the <code>mm / yyyy</code> format:</p> </div> <div class='fields' id='credit_card_number'> <h4>Credit Card Number</h4> <p> <input type="text" class="credit_card_number" pattern="\d*" x-autocompletetype="cc-number" placeholder="Credit Card number" required> </p> <p>Formats the credit card card number:</p> </div> <div class='fields' id='number'> <h4>Numbers</h4> <p><input type="text" class='number' placeholder="Only Digits"></p> <h4>Numbers (Length = 5)</h4> <p><input type="text" class='number' placeholder="Only Digits" data-formance_length='5'></p> <p>Formats the number:</p> </div> <div class='fields' id='postal_code'> <h4>Canadian Postal Code 'A1A 1A1'</h4> <p> <input type="text" class="postal_code" placeholder="Postal Code"> </p> <p>Formats the postal code in the <code>A1A 1A1</code> format: </p> </div> <div class='fields' id='ontario_drivers_license_number'> <h4>Ontario Driver's License Number 'A1234 - 12345 - 12345'</h4> <p> <input type="text" class="ontario_drivers_license_number" placeholder="Ontario Driver's License Number"> </p> <p>Formats the Ontario Driver's License Number in the format <code>A1234 - 12345 - 12345</code>:</p> </div> <div class='fields' id='ontario_photo_health_card_number'> <h4>Ontario Photo Health Card Number '1234 - 123 - 123 - AB'</h4> <p> <input type="text" class="ontario_photo_health_card_number" placeholder="Ontario Photo Health Card Number"> </p> <p>Formats the Ontario Photo Health Card Number in the format <code>1234 - 123 - 123 - AB</code>:</p> </div> <div class='fields' id='ontario_outdoors_card_number'> <h4>Ontario Outdoors Card Number '708158 1234567890'</h4> <p> <input type="text" class="ontario_outdoors_card_number" placeholder="Ontario Outdoors Card Number"> </p> <p>Formats the Ontario Outdoors Card Number in the format <code>708158 123456789</code>:</p> </div> <div class='fields' id='time_yy_mm'> <h4>Time YY / MM</h4> <p> <input type="text" class="time_yy_mm" pattern="\d*" x-autocompletetype="time_yy_mm" placeholder="Time YY / MM" required> </p> <p>Formats a time in years and months:</p> <p>Useful for inputting time in years and months. For example, duration of employment or residency.</p> </div> <div class='fields' id='uk_sort_code'> <h4>Uk Sort Code</h4> <p> <input type="text" class="uk_sort_code" pattern="\d*" x-autocompletetype="uk_sort_code" placeholder="Uk sort code" required> </p> <p>Formats the UK sort code:</p> </div>