0

Actualmente estoy haciendo un proyecto en el que al enviar un formulario mediante HTML, primero verifique ciertos parametros, para ello hago uso de PreventDefault() de la siguiente forma:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>PROYECTO JS</title>
</head>
<body>
    <form action="ejemplo2.php" id="form">
    <table>
        <tr>
            <td>Nombre</td>
            <td><input type="text" id="nombre"></td>
        </tr>
        <tr>
            <td>Contraseña</td>
            <td><input type="password" id="contrasena"></td>
        </tr>
        <tr>
            <td><input type="submit" onClick="warnings()"></td>
        </tr>
    </table>
    </form>
    <div id="warnings"></div>

<script type="text/javascript" src="ejemplo1.js"></script>
</body>
</html>

JS:

const nombre = document.getElementById("nombre");
const contra = document.getElementById("contrasena");
const form = document.getElementById("form");
const warnings = document.getElementById("warnings");


form.addEventListener("submit", function(event){
        
        if(nombre.nodeValue.trim == null){
            event.preventDefault();
        }
    
})

Pero lo que sucede es que aun cuando no se cumpla el parametro null (o sea que no este vació el input) NO se envía el formulario.

1
  • haz un console.log(nombre.nodeValue.trim) y mira lo que obtienes, ademas no creo que la comparacion a null sea la mejor, deberias de compararalo tambien a " "
    – Christian
    Commented el 5 abr. 2021 a las 1:29

2 respuestas 2

3

Siempre devolverá nulo ya que tu código presenta 2 errores:

  1. nombre.nodeValue.trim siempre devuelve null. nodeValue devuelve el contenido del nodo, en el caso de un input, será null. Si quieres obtener el valor del input debes usar nombre.value.
nombre.nodeValue // incorrecto, siempre devuelve null en un input
nombre.value // correcto, devolverá el valor en curso
  1. Una vez que corrijas nombre.value.trim, se te generará otro error. Para utilizar el método trim debes invocarlo. nombre.value.trim devuelve el método, nombre.value.trim() ejecuta el método y devuelve el valor con el método aplicado.
nombre.value.trim // devuelve el método para ser ejecutado, sin lanzarlo
nombre.value.trim() // dispara el método y lo aplica a nombre.value
0

window.addEventListener('load', ()=>{

    const nombre = document.getElementById("nombre");
    const contra = document.getElementById("contrasena");
    const secont = document.getElementById("secontrasena");
    const form = document.getElementById("form");

    form.addEventListener("submit", function(event){

        if(nombre.value == "" || contra.value == "" || contra.value != secont.value){
            event.preventDefault();
            alert('No se puede');
        }
    });

});
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>PROYECTO JS</title>
    <script src="js/027.js"></script>
</head>
<body>
    <form action="ejemplo2.php" id="form">
    <table>
        <tr>
            <td>Nombre</td>
            <td><input type="text" id="nombre"></td>
        </tr>
        <tr>
            <td>Contraseña</td>
            <td><input type="password" id="contrasena"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="password" id="secontrasena" placeholder="Repite la Contraseña"></td>
        </tr>
        <tr>
            <td><input type="submit"></td>
        </tr>
    </table>
    </form>
</body>
</html>

Yo me tomé la libertad también de añadirte una regla más al preventDefault, que es comprobar que las contraseñas están correctas ambas dos, si no hay, o no son iguales, detiene el proceso.

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.