Reestablecer campos de un formulario
Publicado por raquel (12 intervenciones) el 29/04/2020 20:54:30
Buenas gente, sigo a vueltas con el formulario, esta vez quiero darle una vuelta de tuerca al tema.
Tengo un formulario simple y validado pero esta vez lo que me gustaría hacer para que quedase más estético es que una vez que ha aparecido el mensaje de error de campo requerido, que una vez el usuario escribiese en el campo, desapareciera ese mensaje de error. No se si me estoy explicando, es decir, que si el usuario se deja algún campo requerido aparece un mensaje "campo requerido" en rojo, y lo que busco es que después de que el usuario introduzca el campo ese mensaje de error se borre.
No estoy muy segura de cómo puedo hacerlo, he estado mirando el evento onchange, pero no sé si es el adecuado.
Os dejo el código que tengo hasta ahora:
Muchas gracias de antemano!
Tengo un formulario simple y validado pero esta vez lo que me gustaría hacer para que quedase más estético es que una vez que ha aparecido el mensaje de error de campo requerido, que una vez el usuario escribiese en el campo, desapareciera ese mensaje de error. No se si me estoy explicando, es decir, que si el usuario se deja algún campo requerido aparece un mensaje "campo requerido" en rojo, y lo que busco es que después de que el usuario introduzca el campo ese mensaje de error se borre.
No estoy muy segura de cómo puedo hacerlo, he estado mirando el evento onchange, pero no sé si es el adecuado.
Os dejo el código que tengo hasta ahora:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<form action="#" method="POST" name="form" id="form" onsubmit="return valida()">
<table>
<tr>
<td><label for="nombre">Nombre</label></td>
<td><input type="text" name="nombre" id="nombre" placeholder="Introduzca un nombre"> <span id="Name_error"></span>
</td>
</tr>
<tr>
<td><label for="correo">Correo</label></td>
<td><input type="text" name="correo" id="correo" placeholder="Introduzca un correo elextrónico"> <span id="Mail_error"></span></td>
</tr>
<tr>
<td><label for="asunto">Seleccione una opción:</label></td>
<td><select id="opcion" name="opcion">
<option value="">Selecciona</option>
<option value="1">Opcion 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option></select> <span id="Asunto_error"></span></td>
</tr>
<tr>
<td><label for="mensaje"> Escriba algo..</label></td>
<td><textarea id="mensaje"></textarea> <span id="Mensaje_error"></span></td>
</tr>
<tr>
<td><input type="checkbox" id="check">
<label for="check">Acepto las <a href="">condiciones de uso y privacidad</a> <p id="Check_error"></p></label></td>
</tr>
<tr>
<td><input type="submit" id="btn" name="btn"></td>
<td><input type="button" onclick="limpiarFormulario()" id="limpiar" name="limpiar" value="Cancelar"></td>
</tr>
</table>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
function valida(){
var elemento = document.getElementById("nombre").value;
var valor = document.getElementById("correo").value;
var indice = document.getElementById("opcion").selectedIndex;
var regex = /^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0–9]{1,3}\.[0–9]{1,3}\.[0–9]{1,3}\.[0–9]{1,3}])|(([a-zA-Z\-0–9]+\.)+[a-zA-Z]{2,}))$/;
var acepto = document.getElementById("check");
var msg = document.getElementById("mensaje").value;
var error_Nom = document.getElementById("Name_error");
var error_Mail = document.getElementById("Mail_error");
var error_Asunto = document.getElementById("Asunto_error");
var error_msg = document.getElementById("Mensaje_error");
var error_check = document.getElementById("Check_error");
if(elemento == null || elemento.length == 0 || /^\s+$/.test(elemento)){
error_Nom.innerHTML ="Campo nombre requerido";
error_Nom.style.color ="red";
//alert("complete el campo nombre");return false;
}else if( !(regex.test(valor)) ){
error_Mail.innerHTML ="Correo electrónico obligatorio";
error_Mail.style.color ="red";
//alert("debe introducir un correo electrรณnico");return false;
}else if( indice == null || indice == 0){
error_Asunto.innerHTML ="Debe seleccionar una opción";
error_Asunto.style.color ="red";
//alert("debe seleccionar una opcion");return false;
}else if(msg == null || msg.length == 0){
error_msg.innerHTML ="Escriba su consulta por favor";
error_msg.style.color ="red";
//alert("debe escribir algo");return false;
}else if (!acepto.checked){
error_check.innerHTML ="Debe aceptar las condiciones de uso y privacidad";
error_check.style.color ="red";
//alert("debe aceptar las condiciones de uso y privacidad");return false;
}return true;
}function limpiarFormulario(){
document.getElementById("form").reset();
}Muchas gracias de antemano!
Valora esta pregunta
0