CODEWITHSUNDEEP
javascriptjqueryhtmlmodernizr
burnersk
burnersk

Reputation: 3480

JavaScript workaround for not supported HTML5 elements and attributes

I am using Modernizr to detect unsupported HTML5 elements and attributes within browsers. If a element/attribute is not supported I like to write a quick workaround with jQuery.

At the moment I am stumbling around the "required" attribute with input element. My thought was to "detect" the associated form element and hook the jQuery .submit() event of the form. But how to do it?

To gain insight yourself here is a sample code how I fixed the "placeholder" attribute with input element:

if(Modernizr.input.placeholder == false) {
    alert('input placeholder not exists, perform a workaround...');
    $('[placeholder]').each(function() {
        var input = $(this);
        var placeholder = input.attr('placeholder');
        input.bind('focus', function() {
            if(this.value == placeholder) {
                this.value = '';
                $(this).removeClass('mzr-no-placeholder');
            }
        }).bind('blur', function() {
            if(this.value == '') {
                this.value = placeholder;
                $(this).addClass('mzr-no-placeholder');
            }
        });
        if(!this.value.length) {
            this.value = placeholder;
            $(this).addClass('mzr-no-placeholder');
        }
    });
}
else {
    alert('input placeholder exists.');
}

Here is the solution

Thanks to greut.

if(Modernizr.input.required == false) {
    alert('Tag input required not exists, perform a workaround...');
    $('form').submit(function() {
        var requirementsOK = true;
        $('[required]', this).each(function() {
            if(!this.value.length) {
                $(this).addClass('mzr-no-required');
                requirementsOK = false;
            }
            else {
                $(this).removeClass('mzr-no-required');
            }
        });
        return requirementsOK;
    });
}
else {
    alert('Tag input required exists.');
}

Upvotes: 1

Views: 415

Answers (1)

greut
greut

Reputation: 4373

Here an hint on how to start that:

if (Modernizer.input.required === false) {
    $('form').submit(function() {
         $('[required]', this).each(function() {
              if (!$(this).val()) {
                  alert('derp!');
                  return false;
              }
         }
    }
}

Upvotes: 1

Related Questions