Asterisco javascript

loading... · 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 (javascript) [Seleccionar]

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

EdePC · 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 (html4strict) [Seleccionar]

<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 (javascript) [Seleccionar]

    <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 (html4strict) [Seleccionar]

<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

-->

loading... · 27 Abril 2019, 07:27 AM

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

Test Foro de elhacker.net SMF 2.1

Asterisco javascript

loading...

EdePC

loading...