Skip to content

Instantly share code, notes, and snippets.

@gosseti

gosseti/form.html

Last active February 21, 2017 18:28
Download ZIP

Revisions

  1. gosseti revised this gist Jan 30, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions form.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,7 @@
    <div class="form-row cardInfo__cc-num">
    <label for="cc-num"><abbr title="required">*</abbr><span>Card Number</span></label>
    <div class="cc-num__wrap">
    <!-- using type="tel" because type="number" doesn’t pass HTML5 form validation with jQuery.payment formatting -->
    <input id="cc-num" type="tel" class="paymentInput cc-num" placeholder="•••• •••• •••• ••••" autocompletetype="cc-number" required="required">
    <span class="card" aria-hidden="true"></span>
    </div>
    @@ -24,6 +25,7 @@
    <input class="button" name="commit" type="submit" value="Make Payment">
    <a class="cancel-link" href="/">Cancel</a>
    </div>

    </fieldset>

    </form>
  2. gosseti revised this gist Jan 30, 2014. 2 changed files with 8 additions and 36 deletions.
    14 changes: 0 additions & 14 deletions form.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,5 @@
    <form accept-charset="UTF-8" action="/payment" class="cardInfo" method="post">

    <fieldset class="cardInfo__personalDetails">

    <div class="input string required cardInfo_firstname form-row">
    <label class="string required" for="cardInfo_firstname"><abbr title="required">*</abbr> First Name</label>
    <input aria-required="true" id="cardInfo_firstname" maxlength="60" name="cardInfo[firstname]" placeholder="e.g. Joe" required="required" type="text">
    </div>

    <div class="input string required cardInfo_surname form-row">
    <label class="string required" for="cardInfo_surname"><abbr title="required">*</abbr> Surname</label>
    <input aria-required="true" id="cardInfo_surname" maxlength="60" name="cardInfo[surname]" placeholder="e.g. Bloggs" required="required" type="text">
    </div>

    </fieldset>

    <fieldset class="cardInfo__cardDetails">

    <div class="form-row cardInfo__cc-num">
    30 changes: 8 additions & 22 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,14 @@
    .cc-num__wrap{
    position:relative;
    }

    .cardInfo_firstname,
    .cardInfo_surname{
    width:48.75%;
    .paymentInput.identified{
    border-color:#2ecc71;
    }

    .cardInfo_firstname{
    float:left;
    .paymentInput.identified:focus{
    border-color:#2ecc71;
    box-shadow: 0 0 .1875em #2ecc71;
    }

    .cardInfo_surname{
    float:right;
    .cc-num__wrap{
    position:relative;
    }

    .card{
    @@ -28,8 +24,7 @@
    }

    .cardInfo__cc-exp,
    .cardInfo__cc-cvc,
    .cc-exp__live{
    .cardInfo__cc-cvc{
    float:left;
    max-width:4.875em;
    }
    @@ -56,13 +51,4 @@

    .cc-num.discover + .card{
    background:url('discover.png') no-repeat center center;
    }

    .paymentInput.identified{
    border-color:#2ecc71;
    }

    .paymentInput.identified:focus{
    border-color:#2ecc71;
    box-shadow: 0 0 .1875em #2ecc71;
    }
  3. gosseti revised this gist Jan 30, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion form.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@
    <label for="cc-num"><abbr title="required">*</abbr><span>Card Number</span></label>
    <div class="cc-num__wrap">
    <input id="cc-num" type="tel" class="paymentInput cc-num" placeholder="•••• •••• •••• ••••" autocompletetype="cc-number" required="required">
    <span class="card"></span>
    <span class="card" aria-hidden="true"></span>
    </div>
    </div>

  4. gosseti revised this gist Jan 30, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion validations.js
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@ $(function() {
    $('.cc-cvc').removeClass('identified');
    }
    }
    // this runs the above function every time stuff is entered into this expiry input
    // this runs the above function every time stuff is entered into the card inputs
    $('.paymentInput').bind('change paste keyup', function() {
    validateDetails();
    });
  5. gosseti revised this gist Jan 30, 2014. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion validations.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,6 @@ $(function() {
    var expiry = $('.cc-exp').payment('cardExpiryVal');
    var validateExpiry = $.payment.validateCardExpiry(expiry["month"], expiry["year"]);
    var validateCVC = $.payment.validateCardCVC($('.cc-cvc').val());

    // if statement on whether the card’s expiry is valid or not
    if (validateExpiry) {
    // if the expiry is valid add the identified class
  6. gosseti revised this gist Jan 30, 2014. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions validations.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,6 @@
    $(function() {

    var validateDetails = function() {

    // set variables for the expiry date validation, cvc validation and expiry date 'splitter'
    var expiry = $('.cc-exp').payment('cardExpiryVal');
    var validateExpiry = $.payment.validateCardExpiry(expiry["month"], expiry["year"]);
    @@ -25,7 +24,6 @@ $(function() {
    // remove again if the cvc becomes invalid
    $('.cc-cvc').removeClass('identified');
    }

    }
    // this runs the above function every time stuff is entered into this expiry input
    $('.paymentInput').bind('change paste keyup', function() {
  7. gosseti revised this gist Jan 30, 2014. 1 changed file with 68 additions and 0 deletions.
    68 changes: 68 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    .cc-num__wrap{
    position:relative;
    }

    .cardInfo_firstname,
    .cardInfo_surname{
    width:48.75%;
    }

    .cardInfo_firstname{
    float:left;
    }

    .cardInfo_surname{
    float:right;
    }

    .card{
    position:absolute;
    display:block;
    right:.375em;
    top:50%;
    margin-top:-10px;
    width:28px;
    height:19px;
    background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjExMSw3Ni4yOTZjMCwyLjg0NCwyLjMwNSw1LjE0OCw1LjE0Nyw1LjE0OGg4MS44OTEgICAgYzIuODQxLDAsNS4xNDctMi4zMDUsNS4xNDctNS4xNDh2LTMyLjg5SDMuMTExVjc2LjI5NnogTTY5LjY3OSw1NS42OTdoMTUuOTE0djE1LjkxNEg2OS42NzlWNTUuNjk3eiBNOTAuMTQ5LDE3LjUwM0g4LjI1OCAgICBjLTIuODQyLDAtNS4xNDcsMi4zMDUtNS4xNDcsNS4xNDd2Ny42OTNoOTIuMTg2VjIyLjY1Qzk1LjI5NywxOS44MDgsOTIuOTksMTcuNTAzLDkwLjE0OSwxNy41MDN6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+) no-repeat center center;
    background-size: 100%;
    }

    .cardInfo__cc-exp,
    .cardInfo__cc-cvc,
    .cc-exp__live{
    float:left;
    max-width:4.875em;
    }

    .cardInfo__cc-exp{
    margin-right:.75em;
    }

    .cc-num.visa + .card{
    background:url('visa.png') no-repeat center center;
    }

    .cc-num.amex + .card{
    background:url('amex.png') no-repeat center center;
    }

    .cc-num.mastercard + .card{
    background:url('mastercard.png') no-repeat center center;
    }

    .cc-num.diners + .card{
    background:url('diners.png') no-repeat center center;
    }

    .cc-num.discover + .card{
    background:url('discover.png') no-repeat center center;
    }

    .paymentInput.identified{
    border-color:#2ecc71;
    }

    .paymentInput.identified:focus{
    border-color:#2ecc71;
    box-shadow: 0 0 .1875em #2ecc71;
    }
  8. gosseti revised this gist Jan 30, 2014. 1 changed file with 6 additions and 19 deletions.
    25 changes: 6 additions & 19 deletions form.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,16 +3,12 @@
    <fieldset class="cardInfo__personalDetails">

    <div class="input string required cardInfo_firstname form-row">
    <label class="string required" for="cardInfo_firstname">
    <abbr title="required">*</abbr> First Name
    </label>
    <label class="string required" for="cardInfo_firstname"><abbr title="required">*</abbr> First Name</label>
    <input aria-required="true" id="cardInfo_firstname" maxlength="60" name="cardInfo[firstname]" placeholder="e.g. Joe" required="required" type="text">
    </div>

    <div class="input string required cardInfo_surname form-row">
    <label class="string required" for="cardInfo_surname">
    <abbr title="required">*</abbr> Surname
    </label>
    <label class="string required" for="cardInfo_surname"><abbr title="required">*</abbr> Surname</label>
    <input aria-required="true" id="cardInfo_surname" maxlength="60" name="cardInfo[surname]" placeholder="e.g. Bloggs" required="required" type="text">
    </div>

    @@ -21,29 +17,20 @@
    <fieldset class="cardInfo__cardDetails">

    <div class="form-row cardInfo__cc-num">
    <label for="cc-num">
    <abbr title="required">*</abbr>
    <span>Card Number</span>
    </label>
    <label for="cc-num"><abbr title="required">*</abbr><span>Card Number</span></label>
    <div class="cc-num__wrap">
    <input id="cc-num" type="tel" class="paymentInput cc-num" placeholder="•••• •••• •••• ••••" autocompletetype="cc-number" required="required">
    <span class="card"></span>
    </div>
    </div>

    <div class="form-row cardInfo__cc-exp">
    <label for="cc-exp">
    <abbr title="required">*</abbr>
    <span>Expires</span>
    </label>
    <label for="cc-exp"><abbr title="required">*</abbr><span>Expires</span></label>
    <input id="cc-exp" type="tel" class="paymentInput cc-exp" placeholder="MM / YY" autocompletetype="cc-exp" required="required">
    </div>

    <div class="form-row cardInfo__cc-cvc">
    <label for="cc-cvc">
    <abbr title="required">*</abbr>
    <span>CVC</span>
    </label>
    <label for="cc-cvc"><abbr title="required">*</abbr><span>CVC</span></label>
    <input id="cc-cvc" type="tel" class="paymentInput cc-cvc" placeholder="CVC" autocompletetype="cc-cvc" required="required">
    </div>

    @@ -52,5 +39,5 @@
    <a class="cancel-link" href="/">Cancel</a>
    </div>
    </fieldset>

    </form>
  9. gosseti revised this gist Jan 30, 2014. No changes.
  10. gosseti revised this gist Jan 30, 2014. 1 changed file with 55 additions and 45 deletions.
    100 changes: 55 additions & 45 deletions form.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,46 +1,56 @@
    <form accept-charset="UTF-8" action="/demos/a-better-card-payment-form" class="simple_form cardInfo" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="sRAFn6dZZqUbp7PpT7RjFb7VQM8VBA1TnivwPQJX7Ak="></div>

    <fieldset class="cardInfo__personalDetails">

    <div class="input string required cardInfo_firstname form-row"><label class="string required" for="cardInfo_firstname"><abbr title="required">*</abbr> First Name</label><input aria-required="true" class="string required" id="cardInfo_firstname" maxlength="60" name="cardInfo[firstname]" placeholder="e.g. Joe" required="required" size="60" type="text"></div>
    <div class="input string required cardInfo_surname form-row"><label class="string required" for="cardInfo_surname"><abbr title="required">*</abbr> Surname</label><input aria-required="true" class="string required" id="cardInfo_surname" maxlength="60" name="cardInfo[surname]" placeholder="e.g. Bloggs" required="required" size="60" type="text"></div>

    </fieldset>

    <fieldset class="cardInfo__cardDetails">

    <span class="payment-errors"></span>

    <div class="form-row cardInfo__cc-num">
    <label for="cc-num">
    <abbr title="required">*</abbr>
    <span>Card Number</span>
    </label>
    <div class="cc-num__wrap">
    <input id="cc-num" type="tel" class="paymentInput cc-num" placeholder="•••• •••• •••• ••••" autocompletetype="cc-number" required="required">
    <span class="card"></span>
    </div>
    </div>

    <div class="form-row cardInfo__cc-exp">
    <label for="cc-exp">
    <abbr title="required">*</abbr>
    <span>Expires</span>
    </label>
    <input id="cc-exp" type="tel" class="paymentInput cc-exp" placeholder="MM / YY" autocompletetype="cc-exp" required="required">
    </div>

    <div class="form-row cardInfo__cc-cvc">
    <label for="cc-cvc">
    <abbr title="required">*</abbr>
    <span>CVC</span>
    </label>
    <input id="cc-cvc" type="tel" class="paymentInput cc-cvc" placeholder="CVC" autocompletetype="cc-cvc" required="required">
    </div>

    <div class="cardInfo__submission">
    <input class="button" name="commit" type="submit" value="Make Payment">
    <a class="cancel-link" href="/">Cancel</a>
    </div>
    </fieldset>
    <form accept-charset="UTF-8" action="/payment" class="cardInfo" method="post">

    <fieldset class="cardInfo__personalDetails">

    <div class="input string required cardInfo_firstname form-row">
    <label class="string required" for="cardInfo_firstname">
    <abbr title="required">*</abbr> First Name
    </label>
    <input aria-required="true" id="cardInfo_firstname" maxlength="60" name="cardInfo[firstname]" placeholder="e.g. Joe" required="required" type="text">
    </div>

    <div class="input string required cardInfo_surname form-row">
    <label class="string required" for="cardInfo_surname">
    <abbr title="required">*</abbr> Surname
    </label>
    <input aria-required="true" id="cardInfo_surname" maxlength="60" name="cardInfo[surname]" placeholder="e.g. Bloggs" required="required" type="text">
    </div>

    </fieldset>

    <fieldset class="cardInfo__cardDetails">

    <div class="form-row cardInfo__cc-num">
    <label for="cc-num">
    <abbr title="required">*</abbr>
    <span>Card Number</span>
    </label>
    <div class="cc-num__wrap">
    <input id="cc-num" type="tel" class="paymentInput cc-num" placeholder="•••• •••• •••• ••••" autocompletetype="cc-number" required="required">
    <span class="card"></span>
    </div>
    </div>

    <div class="form-row cardInfo__cc-exp">
    <label for="cc-exp">
    <abbr title="required">*</abbr>
    <span>Expires</span>
    </label>
    <input id="cc-exp" type="tel" class="paymentInput cc-exp" placeholder="MM / YY" autocompletetype="cc-exp" required="required">
    </div>

    <div class="form-row cardInfo__cc-cvc">
    <label for="cc-cvc">
    <abbr title="required">*</abbr>
    <span>CVC</span>
    </label>
    <input id="cc-cvc" type="tel" class="paymentInput cc-cvc" placeholder="CVC" autocompletetype="cc-cvc" required="required">
    </div>

    <div class="cardInfo__submission">
    <input class="button" name="commit" type="submit" value="Make Payment">
    <a class="cancel-link" href="/">Cancel</a>
    </div>
    </fieldset>

    </form>
  11. gosseti revised this gist Jan 30, 2014. 1 changed file with 19 additions and 8 deletions.
    27 changes: 19 additions & 8 deletions validations.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,23 +2,34 @@

    $(function() {

    var validateExpiry = function() {
    // set variables for the expiry date validation and expiry 'splitter' object
    var validateDetails = function() {

    // set variables for the expiry date validation, cvc validation and expiry date 'splitter'
    var expiry = $('.cc-exp').payment('cardExpiryVal');
    var validateExpiry = $.payment.validateCardExpiry(expiry["month"], expiry["year"]);
    // perform an if statement on whether the card’s expiry is valid or not
    var validateCVC = $.payment.validateCardCVC($('.cc-cvc').val());

    // if statement on whether the card’s expiry is valid or not
    if (validateExpiry) {
    // if the expiry is valid add the identified class
    $('.cc-exp').addClass('identified');
    } else {
    // remove is again if the expiry becomes invalid
    // remove again if the expiry becomes invalid
    $('.cc-exp').removeClass('identified');
    }
    // if statement on whether the card’s cvc is valid or not
    if (validateCVC) {
    // if the cvc is valid add the identified class
    $('.cc-cvc').addClass('identified');
    } else {
    // remove again if the cvc becomes invalid
    $('.cc-cvc').removeClass('identified');
    }

    }

    // this runs the above function every time stuff is entered into this expiry input
    $('.cc-exp').bind('change paste keyup', function() {
    validateExpiry();
    $('.paymentInput').bind('change paste keyup', function() {
    validateDetails();
    });

    });
  12. gosseti revised this gist Jan 30, 2014. 1 changed file with 46 additions and 9 deletions.
    55 changes: 46 additions & 9 deletions form.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,46 @@
    <!-- this should be inside as part of your <form> element -->
    <div class="form-row cardInfo__cc-exp">
    <label for="cc-exp">
    <abbr title="required">*</abbr>
    <span>Expires</span>
    </label>
    <!-- we set type="tel" because HTML5 validations don’t play well with type="number" -->
    <input id="cc-exp" type="tel" data-stripe="expiry" class="cc-exp" placeholder="MM / YY" autocompletetype="cc-exp" required="required">
    </div>
    <form accept-charset="UTF-8" action="/demos/a-better-card-payment-form" class="simple_form cardInfo" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="sRAFn6dZZqUbp7PpT7RjFb7VQM8VBA1TnivwPQJX7Ak="></div>

    <fieldset class="cardInfo__personalDetails">

    <div class="input string required cardInfo_firstname form-row"><label class="string required" for="cardInfo_firstname"><abbr title="required">*</abbr> First Name</label><input aria-required="true" class="string required" id="cardInfo_firstname" maxlength="60" name="cardInfo[firstname]" placeholder="e.g. Joe" required="required" size="60" type="text"></div>
    <div class="input string required cardInfo_surname form-row"><label class="string required" for="cardInfo_surname"><abbr title="required">*</abbr> Surname</label><input aria-required="true" class="string required" id="cardInfo_surname" maxlength="60" name="cardInfo[surname]" placeholder="e.g. Bloggs" required="required" size="60" type="text"></div>

    </fieldset>

    <fieldset class="cardInfo__cardDetails">

    <span class="payment-errors"></span>

    <div class="form-row cardInfo__cc-num">
    <label for="cc-num">
    <abbr title="required">*</abbr>
    <span>Card Number</span>
    </label>
    <div class="cc-num__wrap">
    <input id="cc-num" type="tel" class="paymentInput cc-num" placeholder="•••• •••• •••• ••••" autocompletetype="cc-number" required="required">
    <span class="card"></span>
    </div>
    </div>

    <div class="form-row cardInfo__cc-exp">
    <label for="cc-exp">
    <abbr title="required">*</abbr>
    <span>Expires</span>
    </label>
    <input id="cc-exp" type="tel" class="paymentInput cc-exp" placeholder="MM / YY" autocompletetype="cc-exp" required="required">
    </div>

    <div class="form-row cardInfo__cc-cvc">
    <label for="cc-cvc">
    <abbr title="required">*</abbr>
    <span>CVC</span>
    </label>
    <input id="cc-cvc" type="tel" class="paymentInput cc-cvc" placeholder="CVC" autocompletetype="cc-cvc" required="required">
    </div>

    <div class="cardInfo__submission">
    <input class="button" name="commit" type="submit" value="Make Payment">
    <a class="cancel-link" href="/">Cancel</a>
    </div>
    </fieldset>
    </form>
  13. gosseti revised this gist Jan 30, 2014. No changes.
  14. gosseti revised this gist Jan 30, 2014. No changes.
  15. gosseti revised this gist Jan 30, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion validations.js
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,7 @@ $(function() {
    }

    // this runs the above function every time stuff is entered into this expiry input
    $('.cc-exp__live').bind('change paste keyup', function() {
    $('.cc-exp').bind('change paste keyup', function() {
    validateExpiry();
    });

  16. gosseti revised this gist Jan 30, 2014. 2 changed files with 12 additions and 3 deletions.
    9 changes: 9 additions & 0 deletions form.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <!-- this should be inside as part of your <form> element -->
    <div class="form-row cardInfo__cc-exp">
    <label for="cc-exp">
    <abbr title="required">*</abbr>
    <span>Expires</span>
    </label>
    <!-- we set type="tel" because HTML5 validations don’t play well with type="number" -->
    <input id="cc-exp" type="tel" data-stripe="expiry" class="cc-exp" placeholder="MM / YY" autocompletetype="cc-exp" required="required">
    </div>
    6 changes: 3 additions & 3 deletions validations.js
    View file
    Original file line number Diff line number Diff line change
    @@ -4,15 +4,15 @@ $(function() {

    var validateExpiry = function() {
    // set variables for the expiry date validation and expiry 'splitter' object
    var expiry = $('.cc-exp__live').payment('cardExpiryVal');
    var expiry = $('.cc-exp').payment('cardExpiryVal');
    var validateExpiry = $.payment.validateCardExpiry(expiry["month"], expiry["year"]);
    // perform an if statement on whether the card’s expiry is valid or not
    if (validateExpiry) {
    // if the expiry is valid add the identified class
    $('.cc-exp__live').addClass('identified');
    $('.cc-exp').addClass('identified');
    } else {
    // remove is again if the expiry becomes invalid
    $('.cc-exp__live').removeClass('identified');
    $('.cc-exp').removeClass('identified');
    }
    }

  17. gosseti created this gist Jan 30, 2014.
    24 changes: 24 additions & 0 deletions validations.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    // include jquery and jquery.payment before here

    $(function() {

    var validateExpiry = function() {
    // set variables for the expiry date validation and expiry 'splitter' object
    var expiry = $('.cc-exp__live').payment('cardExpiryVal');
    var validateExpiry = $.payment.validateCardExpiry(expiry["month"], expiry["year"]);
    // perform an if statement on whether the card’s expiry is valid or not
    if (validateExpiry) {
    // if the expiry is valid add the identified class
    $('.cc-exp__live').addClass('identified');
    } else {
    // remove is again if the expiry becomes invalid
    $('.cc-exp__live').removeClass('identified');
    }
    }

    // this runs the above function every time stuff is entered into this expiry input
    $('.cc-exp__live').bind('change paste keyup', function() {
    validateExpiry();
    });

    });