Hacer que un elemento se autoseleccione tras un evento (alerta) en javascript

[T0p1t0]

Buenas, a ver si consigo explicar de manera que se entienda bien lo que quiero:

Estoy dandoles funcionalidad a unos formularios. Lo he configurado en javascript, de manera que si se deja alguno de los parametros del formulario en blanco, me saque una alerta diciendo que complete dicho parametro.

Por otra parte, también en javascript, he creado una funcion de resaltar en el caso de que haga focus con el raton en un determinado campo del formulario. En ese caso, se queda dicho elemento marcado con un borde y un cambio del color de su respectivo textarea.

Pues bien, lo que me gustaría es que además de lanzarme la alerta de que tengo que rellenar el campo vacío del formulario, automaticamente se me quedase marcado dicho campo (como si lo hubiera pulsado con el ratón).

He buscado información, y lo que he hecho es esto:

Código [Seleccionar] Expandir

... if (nombre.length==0) {
alert("Inserte su nombre completo");
document.getElementById("nombre").focus() ...

Así mismo, ya tenía establecida de antes la función "resaltar" que se activa cuando ese elemento está onfocus (determinado en el propio html que se active la funcion resaltar cuando el elemento en cuestion esté onfocus "onfocus="resaltar('nombre')" ")

Código [Seleccionar] Expandir

function resaltar(mi_id) {
document.getElementById(mi_id).style.border="2px solid #e6b700";
document.getElementById(mi_id).style.backgroundColor="#F5F5F5";
}


El problema, es que de la manera en la que lo he hecho funciona quedando resaltado un instante, para apagarse inmediatamente, y lo que yo quiero es que se quede permanetemente hasta que marque otro elemento.

Espero que se haya entendido bien mi problema...

Un saludo

[basickdagger]

hola, ps yo no complicaría tanto solamente coloca requerid al final de los input q no quieres q estén vacíos y listo adiós javascript.

Código [Seleccionar] Expandir


<input type="text" id="mi input" name="name" required>


no recuerdo si funciona en IE, pero bueno, si quieren ver algo bien q utilicen un navegador bueno xD

[#!drvy]

Deberias reestructurar tu codigo. Tal y como nos lo muestras te deberia de funcionar perfectamente.

no recuerdo si funciona en IE, pero bueno, si quieren ver algo bien q utilicen un navegador bueno xD

Le dices eso a una empresa y te manda a la calle enseguida No funciona ni siquiera en IE9.. Safari (y eso que usa webkit) tampoco lo soporta.
http://caniuse.com/form-validation

Saludos

[basickdagger]

Le dices eso a una empresa y te manda a la calle enseguida No funciona ni siquiera en IE9.. Safari (y eso que usa webkit) tampoco lo soporta.

haha xD ya lo se era broma, yo lo suelo utilizar y para navegadores como IE  le mostraba otro codigo, en cuanto a safari esa no me la sabia, bueno gracias, saludos

[T0p1t0]

hola, ps yo no complicaría tanto solamente coloca requerid al final de los input q no quieres q estén vacíos y listo adiós javascript.

Código [Seleccionar] Expandir


<input type="text" id="mi input" name="name" required>


no recuerdo si funciona en IE, pero bueno, si quieren ver algo bien q utilicen un navegador bueno xD

A ver, la cosa es que quiero aprender a hacerlo porque me parece una funcionalidad útil para una web, y si en un futuro, cuando me dedique a esto, si un cliente me pide algo parecido, yo poderselo ofrecer. Es un ejercicio que estoy haxciendo por mi cuenta para practicar, pero como he dicho, esa funcionalidad me parece útil y de ahí mi interés.

No te lo tomes a mal, pero a  mi gustan las cosas bien hechas, aunque me impliquen dolores de cabeza hasta que encuentro la forma de hacerlo

Deberias reestructurar tu codigo. Tal y como nos lo muestras te deberia de funcionar perfectamente.

Le dices eso a una empresa y te manda a la calle enseguida No funciona ni siquiera en IE9.. Safari (y eso que usa webkit) tampoco lo soporta.
http://caniuse.com/form-validation

Saludos

No sé a que te refieres exactamente con restructurar mi código. A parte, hay más funciones que hacen bien su cometido...Si es necesario subo el código entero a mega para que le echéis un vistazo...

[T0p1t0]

A ver, la cosa es que quiero aprender a hacerlo porque me parece una funcionalidad útil para una web, y si en un futuro, cuando me dedique a esto, si un cliente me pide algo parecido, yo poderselo ofrecer. Es un ejercicio que estoy haxciendo por mi cuenta para practicar, pero como he dicho, esa funcionalidad me parece útil y de ahí mi interés.

No te lo tomes a mal, pero a  mi gustan las cosas bien hechas, aunque me impliquen dolores de cabeza hasta que encuentro la forma de hacerlo.

Edito: acabo de ver que decías que era una broma

No sé a que te refieres exactamente con restructurar mi código. A parte, hay más funciones que hacen bien su cometido...Si es necesario subo el código entero a mega para que le echéis un vistazo...

[WHK]

Eso de utilizar alertas en campos vacios es de cavernicolas, lo que debes hacer es crear un evento onblur del input donde si el campo está vacio entonces mostrar un pequeño texto de color rojo al costado derecho diciendo que el campo es requerido, luego desde el código dinámico (cgi, php, asp) debes volver a verificar que estos campos no vengan vacios porque recuerda que hay un gran porcentaje de usuarios en todo el mundo que navegan sin javascriopt y puedes abrir una brecha de seguridad importante.

En jQuery sería algo así:

Código (javascript) [Seleccionar] Expandir

$(document).ready(function(){
$('#input_1').blur(function(){
if($(this).text() == '')
$('#leyenda_error_1').fadeIn();
else
$('#leyenda_error_1').fadeOut();
});
});

Acá te dejo un demo que hice:
http://jsfiddle.net/dA6Qd/

Código (html4strict) [Seleccionar] Expandir

<style type="text/css">
#action > p > span{ color: red; display: none; }
</style>

<script type="text/javascript">
$(document).ready(function(){
$('#action > p > input').blur(function(){
if($(this).val() == '')
$('#leyenda_' + $(this).attr('name')).fadeIn();
else
$('#leyenda_' + $(this).attr('name')).fadeOut();
});
$('#action').submit(function(){
$(this).find('input').blur();
if($(this).find('span:visible').length)
return false;
});
});
</script>

<form action="#" method="post" id="action">
<p><input type="text" name="nombre" /> : Nombre <span id="leyenda_nombre">(El nombre es obligatorio)</span></p>
<p><input type="text" name="mail" /> : Mail <span id="leyenda_mail">(El correo es obligatorio)</span></p>
<p><input type="submit" value="Enviar datos" /></p>
</form>

Lo genial es que es compatible con todos los navegadores existentes.

[T0p1t0]

Eso de utilizar alertas en campos vacios es de cavernicolas, lo que debes hacer es crear un evento onblur del input donde si el campo está vacio entonces mostrar un pequeño texto de color rojo al costado derecho diciendo que el campo es requerido, luego desde el código dinámico (cgi, php, asp) debes volver a verificar que estos campos no vengan vacios porque recuerda que hay un gran porcentaje de usuarios en todo el mundo que navegan sin javascriopt y puedes abrir una brecha de seguridad importante.

En jQuery sería algo así:

Código (javascript) [Seleccionar] Expandir

$(document).ready(function(){
$('#input_1').blur(function(){
if($(this).text() == '')
$('#leyenda_error_1').fadeIn();
else
$('#leyenda_error_1').fadeOut();
});
});

Acá te dejo un demo que hice:
http://jsfiddle.net/dA6Qd/

Código (html4strict) [Seleccionar] Expandir

<style type="text/css">
#action > p > span{ color: red; display: none; }
</style>

<script type="text/javascript">
$(document).ready(function(){
$('#action > p > input').blur(function(){
if($(this).val() == '')
$('#leyenda_' + $(this).attr('name')).fadeIn();
else
$('#leyenda_' + $(this).attr('name')).fadeOut();
});
$('#action').submit(function(){
$(this).find('input').blur();
if($(this).find('span:visible').length)
return false;
});
});
</script>

<form action="#" method="post" id="action">
<p><input type="text" name="nombre" /> : Nombre <span id="leyenda_nombre">(El nombre es obligatorio)</span></p>
<p><input type="text" name="mail" /> : Mail <span id="leyenda_mail">(El correo es obligatorio)</span></p>
<p><input type="submit" value="Enviar datos" /></p>
</form>

Lo genial es que es compatible con todos los navegadores existentes.

Pues muchas gracias WHK. Esta tarde me pondré manos a la obra a hacer pruebas con tu ejemplo. Se agradece de verdad tu aclaración de los usuarios que llevan noscript