Simple Address form Validation simplest

by Joe Saad

HTML

<form name="address">
    <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" />
    </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;}

JavaScript

$('#submitAddress').click(function() {
    $('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");
        }
    });
    if ($('span.req').length <= 0) {
        alert('all is completed');
        //doSubmit();
    }
});