HTML5 formulario de reserva de marcador de posición con validación de formulario en el prototipo

Tengo un formulario HTML5 en mi página con una entrada de correo electrónico que tiene texto de titular de lugar en él. ¡Funciona maravillosamente y me encanta la validación nativa!HTML5 formulario de reserva de marcador de posición con validación de formulario en el prototipo

No estoy seguro de cómo servir los navegadores antiguos mejor. Estoy usando un poco de javascript que copia el texto del marcador de posición y lo imprime como un valor. Funciona bien, pero luego la validación del formulario se desactiva porque hay texto que no es una dirección de correo electrónico en el formulario.

No quiero perder la validación ... ¿Alguna idea?

HTML

<input id="email" type="email" placeholder="Enter your email address">

JavaScript (Prototipo):

var Placeholder = Class.create({ 
    initialize: function (element) { 
     this.element = element; 
     this.placeholder = element.readAttribute('placeholder'); 
     this.blur(); 
     Event.observe(this.element, 'focus', this.focus.bindAsEventListener(this)); 
     Event.observe(this.element, 'blur', this.blur.bindAsEventListener(this)); 
    }, 
    focus: function() { 
     if (this.element.hasClassName('placeholder')) 
      this.element.clear().removeClassName('placeholder'); 
    }, 
    blur: function() { 
     if (this.element.value === '') 
      this.element.addClassName('placeholder').value = this.placeholder; 
    } 
}); 
Event.observe(window, 'load', function(e){ 
    new Placeholder($('email')); 

});

EDIT:

¿No sería grande si navegadores que soporten marcador de posición ignoran el atributo de valor?

EDIT 2:

No, no quiero para establecer el tipo de entrada de texto. Eso cambiará el comportamiento de la validación de la sintaxis del correo electrónico a la revisión ortográfica.

Fuente

2011-07-12 technopeasant

¿Esta es la validación personalizada que está escribiendo o está utilizando un complemento de validación? – kinakuta

Ninguno, es la validación nativa del navegador. Lea aquí: http://diveintohtml5.org/forms.html – technopeasant

Estoy familiarizado con eso: asumí que estaba proporcionando su propia validación para navegadores antiguos, pero creo que estoy malinterpretando el problema tal como lo describe. Utiliza JavaScript para colocar el texto de marcador de posición en el campo de entrada, pero en los navegadores html5 compatibles, ¿esto hace que se active la validación porque en realidad no es una dirección de correo electrónico? – kinakuta

usuario Modernizr para detectar el apoyo de marcador de posición y sólo usar su javascript para copiar el texto del marcador si el soporte no existe:

if(!Modernizr.input.placeholder){ 
    // copy placeholder text to input 
}

Esto evitará que se haciendo la copia en navegadores compatibles con atributos de formulario html5 como marcador de posición.

Fuente

2011-07-12 08:37:22 kinakuta

Todos los navegadores actuales, que admiten validación HTML5, también admiten el atributo de marcador de posición (Opera 11+, Chrome 10+, FF4.0 +, IE10 son compatibles con ambos, solo Opera inferior a 11 solo admite la validación). Esto significa que el código de kinakutas debería ayudar. Si no desea usar Modernizr para probar, puede usar el siguiente código: 'if (! 'Placeholder' en document.createElement ('input')) {}' –

Originalmente no quería usar Modernizr porque de su peso y una solicitud http, pero decidí utilizar una compilación configurada solo para la detección de la función de entrada y la ejecuté en el archivo de script de mi complemento en la parte inferior del documento. No tenía que preocuparse por un FOUC (http://paulirish.com/2009/avoiding-the-fouc-v3/) porque es texto de marcador de posición, no un elemento real. ¡Aleluya! – technopeasant

Prueba esto:

<input type="email" value="Enter Email" 
onfocus="if (this.value == 'Enter Email') {this.value = '';}" 
onblur="if (this.value =='') {this.value = 'Enter Email';}" />

Fuente

2011-07-12 07:44:36

si el tipo de entrada está configurado como texto, la validación es revisión ortográfica.Quiero mantener la validación de la sintaxis del correo electrónico, por lo que el tipo debe permanecer como "correo electrónico" – technopeasant

bien, puedes cambiar el tipo a correo electrónico esto seguirá funcionando –

Sé que es una vieja pregunta, pero podría ayudar a otros usuarios que se encuentran con esta pregunta.

Puede usar este http://afarkas.github.com/webshim/demos/demos/webforms.html para la validación de formularios con soporte para navegadores más antiguos. Se sienta encima de jQuery y Modernizer y es bastante fácil de implementar.

Espero que ayude.

Fuente

2012-05-04 13:59:29 elias

HTML5 formulario de reserva de marcador de posición con validación de formulario en el prototipo

Respuesta

Cuestiones relacionadas