HTML5/CSS live Validation w/jQuery

I've been working on a live form validation project, initially I intended on finding a way to solely use CSS for said validation but it quickly became apparent I would require some jQuery to get it to function properly. That said, I'd like another set of eyes on my jQuery to see if anyone has improvements or tips to streamline it a little better. It seems like there is an awful lot of code repetition but I'm not sure how to best minimize that.

If you'd like to offer improvements for the HTML/CSS then by all means have at it but my primary concern is the jQuery below since I haven't polished the styles yet.

Disclaimer: *This is a work in progress, so there are no fallbacks/polyfills for older browsers at this time.



`var timer = 0,
input = $('input').not('[type=radio]'),
radio = $('input[type=radio]'),
select = $('select'),
notRequired = input.not('[required]'),
form = $('form');

function supportsHtml5Validation() {
return typeof document.createElement('input').checkValidity === 'function';
}

function windowSize() {
windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
AddValidationClasses();
}
windowSize();
$(window).resize(function () {
windowSize();
});

function isValid(input) {
$(input).addClass('valid').removeClass('invalid');
}

function inValid(input) {
$(input).addClass('invalid').removeClass('valid');
}

function isEmpty(input) {
if (!$.trim($(input).val())) {
$(input).removeClass('invalid').removeClass('valid').removeClass('invalid-radio');
}
}

function delay(callback, ms) {
timer = setTimeout(callback, ms);
}

function AddValidationClasses(){
$('.group').each(function () {
if (windowWidth >= 800 && input.not(':checked')) {
$(this).addClass('invalid-radio');
radio.on('change', function(){
$(this).closest('.group').removeClass('i

Some of the variable names seem misleading. For example, input is actually a jQuery collection of elements with the radio inputs excluded, so perhaps nonRadioInputs would be more appropriate. Similarly, radio might be better named as radioInputs, select might be better named as selectInputs, etc.

Also, some of the method names are confusing. For example, when I read isValid(input) I would expect such a funtion to return a boolean about whether the input is valid or not. The function appears to actually remove a class name and add a class name. A name that would make more sense to me would be something like addValidClassName(). The same is true for inValid(input) and isEmpty(input).

The function delay() does not appear to be used, though there is a commented line utilizing it. It can be removed unless you plan to use it, in which case it might be advisable to only assign timer within that function.

The variable windowHeight appears to be assigned a value but never used. It can be safely removed.

The variable windowWidth is declared without the var keyword, this it is considered a global variable - actually all the variables outside a function are considered global, so you could limit the scope of all those by moving the whole code into an IIFE.

The registration of the callback for the window resize event can be simplified from

$(window).resize(function () {
    windowSize();
});

To:

$(window).resize(windowSize);

The exclusion of radio inputs could be incorporated into the CSS selector using the :not() CSS pseudo-class instead of the jQuery .not() filter - i.e. instead of

input = $('input').not('[type=radio]'),

Use this:

input = $('input:not([type=radio])'),

In the isEmpty() method, the statement within the conditional block can be simplified:

$(input).removeClass('invalid').removeClass('valid').removeClass('invalid-radio');

Because .removeClass() accepts "One or more space-separated classes to be removed from the class attribute of each matched element."1 the three calls can be simplified to a sing call:

$(input).removeClass('invalid valid invalid-radio');

The change handlers for the radio inputs within AddValidationClasses() could be abstracted into a function that accepts a class name for the closest element and made into partial functions via .bind().

1http://api.jquery.com/removeClass/#removeClass-className

StackExchange Code Review Q#79175, answer score: 2