elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado: ¿Eres nuevo? ¿Tienes dudas acerca del funcionamiento de la comunidad? Lee las Reglas Generales


+  Foro de elhacker.net
|-+  Programación
| |-+  Programación General
| | |-+  Ejercicios
| | | |-+  Asterisco javascript
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Asterisco javascript  (Leído 327 veces)
loading...

Desconectado Desconectado

Mensajes: 3



Ver Perfil
Asterisco javascript
« en: 27 Abril 2019, 05:04 »

Hola, tengo un formulario diseñado en HTML el cual valido los campos con javascript, y estoy intentando que luego del alert(); javascript me marque el campo vacio con un asterisco, sin alguien me puede ayudar o tiene alguna idea, gracias de antemano

Código
  1. <html>
  2.  
  3. <head>
  4. <meta charset="utf-8">
  5.    <title>"Formulario"</title>
  6.  
  7.  
  8.  <SCRIPT TYPE="text/javascript">
  9.  
  10.  function valida(){
  11.  
  12.   var nombre=document.getElementById('nombre').value;
  13.   if(nombre==""){
  14.   alert("El campo nombre esta vacio");
  15.   document.getElementById("nombre").focus();
  16.      return false;
  17.   };
  18.  
  19.   }
  20.  
  21.  </SCRIPT>
  22.  
  23. </head>
  24.  
  25. <body>
  26. <from >
  27.  <fieldset style="width:900px; height:500px;">
  28. <legend><b>Formulario</b></legend>
  29. <table border="1" style="width:700px;">
  30. <tr>
  31. <td>
  32.  
  33.            <label for="Nombre:">Nombre:</label>
  34. <br><input type="text" id="nombre" /><br/></br>
  35. <label for="Apellido:">Apellido:</label>
  36. <br><input type="text" name="Apellido:" /><br /></br>
  37.  
  38.            <label for="Edad:">Edad:</label>
  39. <br><select name="Edad:">
  40.  
  41. <option>Menor de 18</option>
  42.  
  43. <option>De 20 a 25 </option>
  44.  
  45. <option>De 25 a 30</option>
  46.  
  47. </select></br></br>
  48.  
  49. <label for="Telefono:">Tel&eacutefono:</label>
  50. <br><input type="text" name="Telefono:" /><br /></br>
  51. <label for="Direccion:">Direccion:</label>
  52. <br><input type="text" name="Direccion:" size="50" /><br /></br>
  53. <label for="Cedula o pasaporte:">Cedula o pasaporte:</label>
  54. <br><input type="text" name="Cedula o pasaporte:"</br></br>
  55.  
  56.      <br><input type="radio" name="transporte" value="1">Masculino</br>
  57.       <br><input type="radio" name="transporte" value="1">Femenino</br></br>
  58.       <input type="submit"value="Enviar" name="btn1" onclick="valida()"/>
  59.       <input type="reset"value="Limpiar" name="btn2"/>
  60.   </td>
  61.   </tr>
  62. </table>
  63.   </fieldset>
  64.    </from>
  65.  
  66.  
  67. </body>
  68.  
  69. </html>
  70.  
  71.  
  72.  


En línea

EdePC
Colaborador
***
Desconectado Desconectado

Mensajes: 1.292



Ver Perfil
Re: Asterisco javascript
« Respuesta #1 en: 27 Abril 2019, 06:07 »

Saludos,

- Hay bastante por corregir ... primero cambia <from> </from> por <form> </form>.

- HTML5 ya tiene validadores automáticos, por ejemplo si usas:

Código
  1. <input type="text" id="nombre" required>

-- Se comprobará que el campo no esté vacío.

https://developer.mozilla.org/es/docs/Learn/HTML/Forms/Validacion_formulario_datos

- Si aún necesitas forzosamente usar javascript de esa manera para hacer la validación, puedes crear un nuevo elemento al costado del input así:

Código
  1.    <script>
  2.      function valida() {
  3.        var nombre = document.getElementById('nombre');
  4.        if (nombre.value == "") {
  5.          alert("El campo nombre esta vacio");
  6.          document.getElementById("nombre").focus();
  7.          var elem = document.createElement("span");
  8.          elem.innerHTML = "<b style='color:red'>*</b>";
  9.          nombre.parentElement.insertBefore(elem, nombre.nextElementSibling);
  10.          return false;
  11.        }
  12.      }
  13.    </script>

-- OJO que también tienes que evitar que el formulario se envíe en caso de error agregando un return en el onclick del submit:

Código
  1. <input type="submit" value="Enviar" name="btn1" onclick="return valida()">


- Recuerda hacer re-validaciones en el Servidor, si es el caso.

<-- y lo dejo ahí porque el foro me está pidiendo demasiados Re-Captchas  >:D -->


« Última modificación: 27 Abril 2019, 06:10 por EdePC » En línea

loading...

Desconectado Desconectado

Mensajes: 3



Ver Perfil
Re: Asterisco javascript
« Respuesta #2 en: 27 Abril 2019, 07:27 »

Muchas gracias por la ayuda EdePC, ya conocia los validadores automaticos, pero necesitaba hacerlo en javascript ;-)
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines