CC# Validation with HTML5 & CSS

:valid and :invalid I wish I could add the checkmark ::after the input, but I can't because <input> has no document tree content...

by secretgspot

HTML

<!-- Credit Card# Validation with CSS 
     by @girlie_mac 

     See http://html5pattern.com for more RegEx samples
-->

<form>
    <label for="cc">Credit Card Number:</label>
    <input id="cc" type="text" pattern="[0-9]{13,16}" autofocus required />
    <div class="input-validation"></div>
    <img src="http://www.credit-card-logos.com/images/visa_mastercard_credit-card-logos/mc_vs_accpt_h_023_gif.gif"/>
    <input id="payButton" type="submit" value="Pay Now" />
</form>

<div id="processing">
    <progress></progress> 
    <p style="text-align:center">Processing...</p>
</div>

CSS

/* When the pattern is matched */
input[type="text"]:valid {
    color: green;
}

input[type="text"]:valid ~ .input-validation::before {
    content: "✓";
    color: green;
}

/* Unmatched */
input[type="text"]:invalid {
    color: red;
}



/* Misc styles */
input {
    font-size: 1em;
    padding: .3em;
    border-radius: 4px;
    margin: .2em;
} 
label {
    display: block;
} 
body {
    font-family: sans-serif;
    width: 80%;
    padding:1.5em;
    border: 2px solid silver;
    border-radius: 10px;
}
img {
    padding-left: 1em;
    position: relative;
    top: 6px;
}
.input-validation {
    display: inline-block;
}
#processing {
    margin-top: 2em;
    display: none;
}
progress {
    width: 100%;
}
input[type="submit"] {    
    color: white;
    border:0;   
    background: #3e779d;
    background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
    background: -moz-linear-gradient(top,  #65a9d7,  #3e779d);   
    padding: 5px 10px; 
    -webkit-box-shadow: black 0 1px 0;
    -moz-box-shadow: black 0 1px 0;
    box-shadow: black 0 1px 0;    
    text-shadow: rgba(0,0,0,.5) 0 1px 0;
}
input[type="submit"]:active {
    background: #28597a;
}

JavaScript

var f = document.forms[0],   
    p = document.getElementById("processing");

f.addEventListener("submit", function(e){
    e.preventDefault();
    p.style.display = "block";
});