Validación de jQuery y conflicto de marcador de posición

Question

Estoy usando el complemento jQuery Validation para validar un formulario en mi sitio.

http://docs.jquery.com/Plugins/Validation

También estoy usando el siguiente código de marcador de posición para proporcionar soporte para los navegadores que no soportan el atributo HTML 5 placeholder="".

// To detect native support for the HTML5 placeholder attribute 
var fakeInput = document.createElement("input"), 
    placeHolderSupport = ("placeholder" in fakeInput); 

// Applies placeholder attribute behavior in web browsers that don't support it 
if (!placeHolderSupport) { 

    $('[placeholder]').focus(function() { 
     var input = $(this); 
     if (input.val() == input.attr('placeholder')) { 
      input.val(''); 
      input.removeClass('placeholder'); 
     } 
    }).blur(function() { 
     var input = $(this); 
     if (input.val() == '') { 
      input.addClass('placeholder'); 
      input.val(input.attr('placeholder')); 
     } 
    }).blur().parents('form').submit(function() { 
     $(this).find('[placeholder]').each(function() { //line 20 
      var input = $(this); 
      if (input.val() == input.attr('placeholder')) { 
       input.val(''); 
      } 
     }); 
    }); 
} 

Cuando envío mi forma, sucede lo siguiente:

en los navegadores que soporten el atributo placeholder, los incendios validate() función y todo funciona como se supone a.

En navegadores que no admiten el atributo placeholder, las líneas 20-25 borran todos los "marcadores de posición" y luego se activa la función validate(). Si no hay errores, la página envía y todo funciona como debería.

En los navegadores no compatibles, en el caso de que haya errores, los campos correspondientes conseguir aplicar class="error" como de costumbre - pero el texto del marcador no vuelve hasta que el evento blur() sucede en un campo en particular. Esto deja esos campos en blanco, y como no hay etiquetas (solo el atributo placeholder), los usuarios tienen que adivinar qué se supone que contenga cada campo vacío hasta que ocurra el evento blur().

El otro problema que tienen los navegadores no compatibles es que, dado que el marcador de posición modifica el atributo value para mostrar el marcador de posición, los campos que están marcados como obligatorios pasan la validación cuando deberían estar fallando.

Parece que no hay una manera fácil de usar el complemento Validation con el código de soporte de marcador de posición.

Estoy buscando modificar el código de soporte marcador de posición o agregar una función submitHandler: {} como un parámetro a la función validate() para que esto funcione en los navegadores no compatibles.

Answer 1

puede resolver este uniéndose esto a la función de presentar (ya sea a través de jQuery validar o manualmente)

if(element.val() == text){ 
     element.val(''); 
} 

Answer 2

me encontré con un problema similar. ¿Has conseguido el tuyo para trabajar? Me encantaría comparar notas.

Fwiw, esto es lo que hice:

jsfiddle demo here.

Añadir marcadores de posición de entrada al soporte objeto jQuery:

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

La cadena de marcador de posición:

$('input') 
    .addClass('hint') 
    .val(function() { 
     if (!$.support.placeholder) { 
      return $(this).attr('placeholder'); 
     } 
    }) 
    .bind({ 
     focus: function() { 
      var $this = $(this); 
      $this.removeClass('hint'); 
      if ($this.val() === $this.attr('placeholder')) { 
       $this.val(''); 
      } 
     }, 
     blur: function() { 
      var $this = $(this), 

       // Trim whitespace if only space characters are entered, 
       // which breaks the placeholders. 
       val = $.trim($this.val()), 
       ph = $this.attr('placeholder'); 

      if (val === ph || val === '') { 
       $this.addClass('hint').val(''); 
       if (!$.support.placeholder) { 
        $this.val(ph); 
       } 
      } 
     } 
    }); 

Agregar una nueva regla de validación

addMethod docs

$.validator.addMethod('notPlaceholder', function(val, el) { 
    return this.optional(el) || (val !== $(el).attr('placeholder')); 
}, $.validator.messages.required); 

Incluir el nuevo método en las reglas Validar objeto

$('form').validate({ 
    rules: { 
     name: { 
      required: true, 
      notPlaceholder: true 
     }, 
     email: { 
      required: true, 
      notPlaceholder: true, 
      email: true 
     } 
    } 
}); 

Answer 3

Creo que la adición de este a jquery.validate.js, a la función required (línea 900), es el mejor:

required: function(value, element, param) { 

     // Our change 
     if (element.value == element.defaultValue) { 
      return false; 
     } 
     // End our change 

Answer 4

Placeholder actualización de plug-in resuelto mi problema :)