Simple Address form Validation

by Joe Saad

HTML

<form name="address">
    <div id="status" class="">hello</div>
    <p>
     <label for="fname">First Name</label>
     <input type="text" value="" name="fname" id="fname" class="reqF" /></p>
    <p>
     <label for="lname">Last Name</label>
     <input type="text" value="" name="lname" id="lname" class="reqF" />
    </p>
    <p>
     <label for="address1">Address Line 1</label>
     <input type="text" value="" name="address1" id="address1" class="reqF" /><br />
     <span class="field-det">Street address, P.O. box, company name, c/o</span>
    </p>
    <p>
     <label for="address2">Address Line 2</label>
     <input type="text" name="address2" id="address2" /><br />
     <span class="field-det">Apartment, suite, unit, building, floor, etc.</span>
    </p>
    <p>
     <label for="city">City</label>
     <input type="text" value="" name="city" id="city" class="reqF" />
    </p>
    <p>
     <label for="state">State</label>
     <input type="text" value="" name="state" id="state" class="reqF" />
    </p>
    <p>
     <label for="zipcode">Zip Code</label>
     <input type="text" value="" name="zipcode" id="zipcode" class="reqF zipcode number-only" />
    </p>
    <div class="handle">
             <a href="javascript:void(0);" id="submitAddress">Submit</a>    
    </div>
</form>

CSS

form{font-family:arial; padding:5px; font-size:12px;}
span.req{font-size:10px; color:red; margin-left:10px; font-style:italic;}
label {width:130px; float:left; clear:left; }
span.field-det {font-size:10px; margin-left:130px;}
p {margin:10px 0; }
.handle {clear:both; float:right;}
#status {padding:10px; display:none;}
.success {border:2px solid green; background-color:olive; color:green;}
.fail {border:2px solid red; background-color:#f30; color:red;}

JavaScript

if ($('input').hasClass('number-only')) {
    $(".number-only").keydown(function(event) {
        // Allow only backspace and delete and tab
        if (event.keyCode == 8 || event.keyCode == 9) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                event.preventDefault();
            }
        }
    });
}

$('#submitAddress').click(function() {
    var errd = false;
    $('span.req').remove();
    $('.reqF').each(function() {
        if ($(this).val() === "") {
            $(this).after("<span class='req'>Required</span>");
            $(this).css("border", "1px solid red");
        }
        else {
            $(this).closest('p').find('span.req').remove();
            $(this).removeAttr("style");
        }
    });

    var zipFormat = /^\d{5}(-\d{4})?$/;
    if ((!zipFormat.test($('.zipcode').val())) && ($('.zipcode').val() !=="")) {
        $('.zipcode').after("<span class='req'>Invalid Zip</span>");
    }

    if ($('span.req').length <= 0) {
        //alert('all is completed');
        $('form').submit();
        $('#status').addClass('success').fadeIn();
        
    }


});