Реализация placeholder = "" для оперы через jquery

Question

Я реализовал через jQuery атрибут * 5 * HTML2 * заполнителя для браузеров, которые его не поддерживают (в настоящее время все, кроме webkit).

Он действительно отлично работает, но имеет небольшую проблему: он ломает атрибуты HTML 5 required="required" и pattern="pattern" в Opera (это единственный браузер, который поддерживает их в настоящее время).

Это потому, что значение заполнителя временно установлено в качестве входного значения, и, таким образом, Opera при отправке формы думает, что ввод фактически заполнен значением заполнителя. Поэтому я решил удалить заполнители при отправке формы:

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

Это сработало, но возникла другая проблема: если проверка формы на стороне клиента не удалась (из-за атрибутов required или pattern), тогда полям не присваивается значение заполнителя.

Итак, есть ли способ (событие js?) Узнать, если / когда отправка формы завершилась неудачей на стороне клиента , поэтому я могу повторно добавить заполнители?

---

Контрольный пример : откройте это с браузером, который поддерживает обязательный / шаблон, но не заполнитель (только Opera в настоящее время). Попробуйте отправить форму без заполнения каких-либо входов; вы увидите, что когда вы делаете второй ввод теряет заполнитель. Я не хочу, чтобы это произошло.

---

Это полный код, но, вероятно, он не нужен:

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

читать это: http://dev.opera.com/articles/view/making-legacy-pages-work-with-web-forms/

Я не пробовал, но, похоже, вы можете проверить правильность формы следующим образом:

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();
}

или просто проверьте: element.validity.valid

кстати. вы также должны использовать заполнитель для textarea - просто замените input [placeholder] на input [placeholder], textarea [placeholder] '... и на самом деле вам не нужен класс placeholder;)