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

Iniciado por T0p1t0, 5 Junio 2013, 11:32 AM

0 Miembros y 1 Visitante están viendo este tema.

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:

... 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')" ")

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.


<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.

Citar
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 :P No funciona ni siquiera en IE9.. Safari (y eso que usa webkit) tampoco lo soporta.
http://caniuse.com/form-validation

Saludos

basickdagger

Cita de: drvy | BSM en  5 Junio 2013, 17:01 PM
Le dices eso a una empresa y te manda a la calle enseguida :P 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

Cita de: basickdagger en  5 Junio 2013, 16:22 PM
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.


<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

Cita de: drvy | BSM en  5 Junio 2013, 17:01 PM
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 :P 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

Cita de: T0p1t0 en  5 Junio 2013, 17:41 PM
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]
$(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]
<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

Cita de: WHK en  6 Junio 2013, 15:36 PM
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]
$(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]
<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 :)