Implémentation de placeholder = "" pour l'opéra via jquery

Question

J'ai implémenté via jQuery le placeholder HTML 5 attribute pour les navigateurs qui ne le supportent pas (tous sauf webkit pour l'instant).

Cela fonctionne vraiment super, mais il a un petit problème: il casse les HTML 5 required="required" et pattern="pattern" attributs sur Opera (il est le seul navigateur qui les prend en charge actuellement). Cela est dû au fait que la valeur de l'espace réservé est temporairement définie comme valeur d'entrée, et qu'Opera pense donc à la soumission du formulaire que l'entrée est réellement remplie avec la valeur d'espace réservé. Je décide donc d'enlever les espaces réservés lorsque le formulaire est soumis:

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

Cela a fonctionné, mais un autre problème se pose: si la validation du formulaire côté client a échoué (à cause des required ou pattern attributs), les champs ne sont pas re-donné leur valeur de placeholder.

Donc, est-il un moyen (js événement?) De savoir si/quand la soumission de formulaire a échoué côté client, de sorte que je peux ajouter à nouveau les espaces réservés?

---

test cas: ouvert this avec un navigateur qui prend en charge nécessaire/motif mais pas placeholder (seulement Opera à cette époque). Essayez de soumettre le formulaire sans remplir les entrées; vous verrez que lorsque vous faites la deuxième entrée perd l'espace réservé. Je ne veux pas que ça arrive.

---

Ceci est le code complet, mais il est probablement pas nécessaire:

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

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

Je n'ai pas essayé, mais il semble que vous pouvez vérifier la forme validité de cette chemin:

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

ou simplement vérifier: element.validity.valid

btw. vous devez également implémenter placeholder pour textarea - remplacez simplement 'input [placeholder]' par 'input [placeholder], textarea [placeholder]' ... et en fait vous n'avez pas besoin de classe 'placeholder';)