Question

I have implemented through jQuery the placeholder HTML 5 attribute for the browsers that don’t support it (all except webkit at this time).

It works really great but it has a small problem: it breaks the HTML 5 required="required" and pattern="pattern" attributes on Opera (it’s the only browser that supports them currently).

This is because the placeholder value is temporarily set as the input value, and thus Opera thinks on form submission that the input is actually filled with the placeholder value. So I decided to remove the placeholders when the form is submitted:

$('form').submit(function() {
    $(this).find(".placeholder").each(function() {
        $(this).removeClass('placeholder');
        $(this).val('');
    });
});

This worked but another problem arose: if the form client-side validation failed (because of the required or pattern attributes) then the fields aren’t re-given their placeholder value.

So, is there a way (js event?) to know if/when the form submission failed client-side, so I can re-add the placeholders?

---

Test case: open this with a browser that supports required/pattern but not placeholder (only Opera at this time). Try to submit the form without filling any of the inputs; you’ll see that when you do the second input loses the placeholder. I don’t want it to happen.

---

This is the complete code, but it’s probably not needed:

function SupportsPlaceholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}

$(document).ready(function() {
    if (SupportsPlaceholder())
        return;

    $('input[placeholder]').focus(function() {
        if ($(this).hasClass('placeholder')) {
            if ($(this).val() == $(this).attr('placeholder'))
                $(this).val('');
            $(this).removeClass('placeholder');
        }
    });

    $('input[placeholder]').keypress(function() {
        if ($(this).hasClass('placeholder')) {
            if ($(this).val() == $(this).attr('placeholder'))
                $(this).val('');
            $(this).removeClass('placeholder');
        }
    });

    $('input[placeholder]').blur(function() {
        if ($(this).val() != '')
            return;
        $(this).addClass('placeholder');
        $(this).val($(this).attr('placeholder'));
    });

    $('input[placeholder]').each(function() {
        if ($(this).val() != '' && $(this).val() != $(this).attr('placeholder'))
            return;
        $(this).val($(this).attr('placeholder')).addClass('placeholder');
    });

    $('form').submit(function() {
        $(this).find(".placeholder").each(function() {
            $(this).removeClass('placeholder');
            $(this).val('');
        });
    });
});

Answer 1

read this: http://dev.opera.com/articles/view/making-legacy-pages-work-with-web-forms/

I didn’t try, but it looks like you can check form validity this way:

if (form.checkValidity ){// browser supports validation
    if( ! form.checkValidity()){ // form has errors,
        // the browser is reporting them to user 
        // we don't need to take any action

    }else{ // passed validation, submit now
        form.submit();
    }
}else{ // browser does not support validation
    form.submit();
}

or simply check: element.validity.valid

btw. you should implement placeholder also for textarea – simply replace ‘input[placeholder]’ with ‘input[placeholder], textarea[placeholder]’… and actually you don’t need ‘placeholder’ class 😉