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
<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éfono:</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>
Saludos,
- Hay bastante por corregir ... primero cambia
<from> </from> por
<form> </form>.
- HTML5 ya tiene validadores automáticos, por ejemplo si usas:
<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í:
<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:
<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 -->
Muchas gracias por la ayuda EdePC, ya conocia los validadores automaticos, pero necesitaba hacerlo en javascript ;-)