Asterisco javascript

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]

Autor

Tema: Asterisco javascript (Leído 3,105 veces)

loading...

Desconectado

Mensajes: 3

Asterisco javascript

« en: 27 Abril 2019, 05:04 am »

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

<html>
 
<head>
	<meta charset="utf-8">
    <title>"Formulario"</title>
 
 
  <SCRIPT TYPE="text/javascript">
 
  function valida(){
 
  	var nombre=document.getElementById('nombre').value;
  	if(nombre==""){
  		alert("El campo nombre esta vacio");
  		document.getElementById("nombre").focus();
      return false;
  	};
 
  	}
 
  </SCRIPT>
 
</head>
 
<body>
	<from >
	  <fieldset style="width:900px; height:500px;">
		<legend><b>Formulario</b></legend>
		<table border="1" style="width:700px;">
			<tr>
				<td>
 
            <label for="Nombre:">Nombre:</label>
			<br><input type="text" id="nombre" /><br/></br>
			<label for="Apellido:">Apellido:</label>
			<br><input type="text" name="Apellido:" /><br /></br>
 
            <label for="Edad:">Edad:</label>
<br><select name="Edad:">
 
<option>Menor de 18</option>
 
<option>De 20 a 25 </option>
 
<option>De 25 a 30</option>
 
</select></br></br>
 
			<label for="Telefono:">Tel&eacutefono:</label>
			<br><input type="text" name="Telefono:" /><br /></br>
			<label for="Direccion:">Direccion:</label>
			<br><input type="text" name="Direccion:" size="50" /><br /></br>
			<label for="Cedula o pasaporte:">Cedula o pasaporte:</label>
			<br><input type="text" name="Cedula o pasaporte:"</br></br>
 
      <br><input type="radio" name="transporte" value="1">Masculino</br>
       <br><input type="radio" name="transporte" value="1">Femenino</br></br>
       <input type="submit"value="Enviar" name="btn1" onclick="valida()"/>
       <input type="reset"value="Limpiar" name="btn2"/>
   </td>
   </tr>
</table>
	   </fieldset>
    </from>
 
 
</body>
 
</html>


	En línea

EdePC

Moderador Global

Desconectado

Mensajes: 2.176

Re: Asterisco javascript

« Respuesta #1 en: 27 Abril 2019, 06:07 am »

Saludos,

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

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

Código

<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

    <script>
      function valida() {
        var nombre = document.getElementById('nombre');
        if (nombre.value == "") {
          alert("El campo nombre esta vacio");
          document.getElementById("nombre").focus();
          var elem = document.createElement("span");
          elem.innerHTML = "<b style='color:red'>*</b>";
          nombre.parentElement.insertBefore(elem, nombre.nextElementSibling);
          return false;
        }
      }
    </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

<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 am por EdePC »	En línea

loading...

Desconectado

Mensajes: 3

Re: Asterisco javascript

« Respuesta #2 en: 27 Abril 2019, 07:27 am »

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


	En línea

Páginas: [1]

Ir a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	asterisco debajos de nuestro nick. Sugerencias y dudas sobre el Foro	Ilorev	5	3,260	19 Abril 2007, 23:51 pm por sirdarckcat
	Número de teléfono con un asterisco Dispositivos Móviles (PDA's, Smartphones, Tablets)	aaronduran2	0	9,969	29 Octubre 2011, 05:21 am por aaronduran2
	Ayuda Como ocultar con asterisco (caracteres) Scripting	gurrumichi	6	8,416	18 Diciembre 2012, 18:09 pm por Segadorfelix
	Ayuda con javascript en mi web(no tengo ni idea de javascript) Desarrollo Web	jonathanmr	1	3,487	1 Febrero 2013, 06:14 am por Shell Root
	Ejercicio de mover asterisco hasta un determinado limite Programación C/C++	naidmen	0	3,204	12 Febrero 2017, 23:50 pm por naidmen