Formance.js

North American Phone Number

Formats the phone number in the (111) 111 - 1111 format :

Date DD / MM / YYYY

Formats the date in the dd / mm / yyyy format:

Date YYYY / MM / DD

Similar to documentation of dd / mm / yyyy except the format is yyyy / mm / dd.

Email (Simple Algorithm)

Email (Complex Algorithm)

Credit Card CVC

Formats the credit card cvc:

Credit Card Expiry

Formats the credit card expiry date in the mm / yyyy format:

Credit Card Number

Formats the credit card card number:

Numbers

Numbers (Length = 5)

Formats the number:

Canadian Postal Code 'A1A 1A1'

Formats the postal code in the A1A 1A1 format:

Ontario Driver's License Number 'A1234 - 12345 - 12345'

Formats the Ontario Driver's License Number in the format A1234 - 12345 - 12345:

Ontario Photo Health Card Number '1234 - 123 - 123 - AB'

Formats the Ontario Photo Health Card Number in the format 1234 - 123 - 123 - AB:

Ontario Outdoors Card Number '708158 1234567890'

Formats the Ontario Outdoors Card Number in the format 708158 123456789:

Time YY / MM

Formats a time in years and months:

Useful for inputting time in years and months. For example, duration of employment or residency.

Uk Sort Code

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>			
			
ページトップへ戻る