Validating form input fields

by Reusablecode

HTML

<div class=form style="display:block">
    <select id="level" name="level"><option value=""></option><option value="recreational">Recreational</option><option value="competitive">Competitive</option><option value="elite">Elite</option></select>
</div>
<div class=form>
First name: <input type="text" name="firstname" placeholder="John" /><br />
Last name: <input type="text" name="lastname" placeholder="Doe" /><br>
</div>
<div class=form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female<br>
</div>
<div class=form>
<input type="checkbox" name="vehicle" value="Bike" class="nr" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" class="nr" /> I have a car<br>
Username: <input type="text" name="user" placeholder="bozdoz" /><br>
</div>
<a href=# onclick="return false" id=trigger>try me</a>

CSS

.incomplete {background:#FEE}
.complete {background:#EFE}
.placeholder { color:#999 }

JavaScript

Array.prototype.unique = function() {
    var a = [];
    var l = this.length;
    for (var i = 0; i < l; i++) {
        for (var j = i + 1; j < l; j++) {
            if (this[i] === this[j]) j = ++i;
        }
        a.push(this[i]);
    }
    return a;
};

function validateForm() {
    //validate textboxes
    $('input[type=text]').each(function() {
        //label the completed inputs
        if ($(this).val() != "" || $(this).is(".nr")) {
            $(this).addClass("complete").removeClass('incomplete');
        } else {
            $(this).removeClass("complete").addClass('incomplete');
        }
    });
    //validate radios
    rad = [];
    $('input[type=radio]').parents('tr').addClass('incomplete').removeClass('complete').end().each(function() {
        //add radios to the radio array by name
        var n = $(this).attr('name');
        rad.push(n);
    });
    $('input[type=radio]:checked').each(function() {
        $(this).parents('tr').addClass('complete').removeClass('incomplete');
    });
    //validate Checkboxes
    $('input[type=checkbox]').addClass('incomplete').removeClass('complete');
    $('input[type=checkbox]:checked').addClass('complete').removeClass('incomplete').each(function() {
        $(this).parents('tr').addClass('complete').removeClass('incomplete');
    });
    //validate drop down menus
    $("select option:selected").each(function() {
        if ($(this).text() != "") {
            $(this).parents('select').addClass('complete').removeClass('incomplete');
        } else {
            $(this).parents('select').removeClass('complete').addClass('incomplete');
        }
    });
    //c is count of the inputs that need to be filled out
    var c = $('input[type=text]').length;
    c += rad.unique().length;
    c += $('input[type=checkbox]').length;
    c += $('.placeholder').length;
    c -= $('.nr').length;
    c += $('select').length;
    //fin is the number of required inputs that are finished
    var fin =...