0

soy nuevo en este mundillo y tengo una duda con la que llevo peleando varios días.

En mi código tengo un botón que gracias a la función de JS en HTML:

function comprobarInfoEquipo(obj) {
    if (obj.checked)
        document.getElementById('btnperfil').disabled = false;
    else
        document.getElementById('btnperfil').disabled = true;
}

detecta si en un formulario quedan campos por introducir, desactive el botón(False), y si están todos rellenos lo active(True).

Mi problema es que quiero que cuando el botón esté desactivado mande una <alert> indicando que faltan campos, y que cuando el botón este activado mande otra <alert> distinta diciendo que el usuario se creo correctamente.

Hasta ahora solo he conseguido que pulsando el boton independientemente de su estado mande la misma alerta siempre, he probado callbacks sin mucho éxito e incluso haciendo una función para true y otra para false e incluyéndole ambas al mismo botón y otra vez sin mucho éxito.

Desconozco si hay alguna función que me permita hacer eso o meter algo dentro del if y else que se base en el estado(true y false).

Muchísimas gracias.


@kyara, pff he intentado modificar el código y nada, solo salta la primera función:

function valida_envia() {
    //valido el nombre
    if (document.registro.nombre.value.length == 0) {
        alert("Tiene que escribir su nombre")
        document.fvalida.nombre.focus()
        return 0;
    }

    //valido la fecha
    if (document.registro.fecha.selectedIndex == 0) {
        alert("Seleccione fecha de nacimiento")
        document.fvalida.fecha.focus()
        return 0;
    }
    //valido el mail
    if (document.registro.correo.value.length == 0) {
        alert("Tiene que escribir su Correo Electrónico")
        document.fvalida.correo.focus()
        return 0;
    }
    //valido la contraseña
    if (document.registro.contraseña.value.length == 0) {
        alert("Tiene que escribir su Contraseña")
        document.fvalida.contraseña.focus()
        return 0;
    }
    //valido el usuario
    if (document.registro.usuario.value.length == 0) {
        alert("Tiene que escribir su nombre de usuario")
        document.fvalida.usuario.focus()
        return 0;
    }
    //valido el servidor
    if (document.registro.servidor.selectedIndex == 0) {
        alert("Debe seleccionar un servidor")
        document.registro.servidor.focus()
        return 0;
    }

    //el formulario se envia
    alert("Muchas gracias por enviar el formulario");
    document.registro.submit();
    }

el botón lo tenia con un type=submit y lo he cambiado a type=button como indicaba la pagina y no se envía el formulario

El HTML del formulario es este:

<form method="post" target="_self" name="registro">
        <table class="perfil">
            <tr class="perfil">
                <td class="perfil">
                    <p class="texto">Nombre y Apellidos</p><br>
                    <input class="caja" type="text" name="nombre" value="" required /><br>
                </td>
                <td class="perfil">
                    <p class="texto">Fecha de Nacimiento</p><br>
                    <input class="caja" type="date" name="fecha" required><br>
                </td>
            </tr>
            <tr class="perfil">
                <td class="perfil">
                    <p class="texto">Correo Electrónico</p><br>
                    <input class="caja" type="text" name="correo" value="" required /><br>
                </td>
                <td class="perfil">
                    <p class="texto">Contraseña (Entre 4 y 10 máx.)</p><br>
                    <input class="caja" type="password" name="contraseña" value="" minlength="4" maxleght="10"
                        required /><br>
                </td>
            </tr>
            <tr class="perfil">
                <td class="perfil">
                    <p class="texto">Usuario (Entre 8 y 10 máx.)</p><br>
                    <input class="caja" type="text" name="usuario" value="" minlength="8" maxlength="20" required /><br>
                </td>
                <td class="perfil">
                    <p class="texto">Alojamiento Servidor</p><br>
                    <select name="servidor" class="caja" required>
                        <option value="0" class="opcmenu">Elija una opción porfavor</option>
                        <optgroup label="Europa" class="grupserv"></optgroup>
                        <option value="1">España</option>
                        <option value="2">Francia</option>
                        <option value="3">Alemania</option>
                        <optgroup label="Asia" class="grupserv"></optgroup>
                        <option value="1">China</option>
                        <option value="2">Japón</option>
                        <option value="3">India</option>
                        <optgroup label="América" class="grupserv"></optgroup>
                        <option value="1">EE.UU</option>
                        <option value="2">Canadá</option>
                        <option value="3">México</option>
                    </select><br>
                </td>
            </tr>
            <tr class="perfil">
                <td class="perfil">
                    <input id="btnperfil" class="btnperfil" type="submit" value="Enviar" name="buscar"
                        onclick="valida_envia()">
                </td>
            </tr>
        </table>
    </form>

`

3 respuestas 3

0

Añade este código para la validación de la fecha:

 let isValidDate = Date.parse(document.getElementById("fecha").value);
       
    if (isNaN(isValidDate)) {
        alert("Seleccione fecha de nacimiento")
        document.fvalida.fecha.focus()
        return 0;
    }

con

document.getElementById("fecha").value

se recoge el valor del html donde hayas puesto el id fecha en este caso iría en el input de la fecha

<input class="caja" type="date" name="fecha" id="fecha" required><br>

El Date.parse() valida la fecha de entrada. Si no la reconoce devolverá NaN (no un número) como salida. El resultado se guarda en isValidDate. Si es NaN devolverá false y entrará en el if.

Por otro lado, el servidor lo comprobé con tu código y si me salta la alerta

3
  • para la fecha me bastó con cambiar el if de document.registro.fecha.selectIndex a document.registro.fecha.value pero el servidor me sigue saltando la alerta pero acto seguido se envía todo el formulario sin dejarme elegir la opción, probé a cambiarle el selectIndex a value también y aun así, creo que será error del ultimo if
    – Hugo_jim
    Commented el 16 nov. 2021 a las 7:44
  • @Hugo_jim ya vi porque se envía el formulario igualmente. Necesitas cambiar el tipo botón que tienes. Actualmente lo tienes como type: "submit". Tiene que ser type="button" para que llame a la función correctamente y valide todo el formulario antes de enviarlo.
    – Taehyung95
    Commented el 16 nov. 2021 a las 8:47
  • me funcionó correctamente con el type="button",muchisimas gracias, me has salvado de mi calvario :-)
    – Hugo_jim
    Commented el 17 nov. 2021 a las 9:25
0

Podrías poner dentro del if una alerta después de activar el botón e igualmente en el else. Podría ser algo así:

function comprobarInfoEquipo(obj) {
if (obj.checked)
   document.getElementById('btnperfil').disabled = false;
   alert("Usuario creado correctamente");
else
   document.getElementById('btnperfil').disabled = true;
   alert("Faltan campos por rellenar");
}

También he visto que para mostrar el error se puede añadir debajo del formulario un div oculto:

<div class="form-errors"></div>

$(".form-errors").text("The form is not complete").show();

Te paso enlace dónde hablan de esto último. Espero te sirva de ayuda: https://stackoverflow.com/questions/18142652/show-message-instead-of-alert

También te adjunto enlace de otra paǵina interesante dónde habla de los alert: https://desarrolloweb.com/articulos/1767.php

8
  • Si la opción de meter la alerta debajo del if ya lo probé, pero el botón necesita otra función a la que llame hizoClick y habría que relacionarlas de alguna manera, ahora probare la segunda opción y los links, muchísimas gracias!!<3
    – Hugo_jim
    Commented el 15 nov. 2021 a las 10:57
  • El segundo link es un poco mas tosco ya que creas varias alertas pero me pondré a modificarlo y acabare con el resultado que busco, repitiéndome otra vez, mil gracias
    – Hugo_jim
    Commented el 15 nov. 2021 a las 11:00
  • De nada :) Espero que logres el resultado. Si quieres puedes mostrar más de tu código para ver como esta todo relacionado. @Hugo_jim
    – Taehyung95
    Commented el 15 nov. 2021 a las 11:03
  • pff he intentado modificarlo y solo me salta la primera alerta, las demás no saltan
    – Hugo_jim
    Commented el 15 nov. 2021 a las 11:12
  • Muestra más tu código, el html y tu js para ver cómo funciona e intentar ayudarte
    – Taehyung95
    Commented el 15 nov. 2021 a las 11:16
0

Podrías hacer uso del required, desde el html, es decir, por dar un ejemplo, en este form:

const form = document.getElementById("transactionForm");
form.addEventListener("submit", function (event) {
    event.preventDefault();
    form.reset();
})
 <form id="transactionForm">
<div class="date-field"><label for="fecha">Fecha</label> <input  required type="date" class="validate" id="fecha" name="fecha"></div>
 <div><button class="btn waves-effect waves-light" type="submit" id="boton" name="action">Solicitar</button></div>
</form>

Te produciría un input que te exigiría rellenarlo, si intentas presionar el botón, saldrá un globo de "por favor rellena este campo", saliendo desde el input, creo que sería mejor que un alert :)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.