I am using JS
it to validate a form, I wanted to test a function to display the data found in the input through the console in the browser, but it is not showing me anything.
My code:
- view :
<div class="row">
<div class="col">
<div class="row my-5 d-flex justify-content-start">
<div class="col-12 ">
<h2>REGISTRO DE USUARIO</h2>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col align-items-center">
<form method="post" onsubmit="return validarRegistro()">
<div class="col-12 form-group" >
<input type="text" placeholder="Usuario" name="usuarioRegistro" id="usuarioRegistro" required class="form-control">
</div>
<div class="col-12 form-group">
<input type="password" placeholder="Contraseña" name="passwordRegistro" id="passwordRegistro" required class="form-control" >
</div>
<div class="col-12 form-group">
<input type="email" placeholder="Email" name="emailRegistro" id="emailRegistro" required class="form-control">
</div>
<div class="col-12 form-group">
<input type="submit" id="submitRegistro" value="Enviar" class="btn btn-block btn-danger form-control">
</div>
</form>
</div>
</div>
</div>
</div>
The code JS
I have:
function validarRegistro(){
var usuario= document.querySelector("#usuarioRegistro").value;
console.log('usuario',usuario);
var password= document.querySelector("#passwordRegistro").value;
console.log('password',password);
var email= document.querySelector("#emailRegistro").value;
console.log('email',email);
return true;
}
I plug the code js
into my template HTLM
in the <body>
:
<script src="views/js/validarRegistro.js"></script>
I don't know what error I will have, but I have been stuck there for a while, if someone knows how I can solve the problem it would be very helpful.
Your code works fine, the problem is that you are always returning
true
, that's why you don't see the values in the console.For what it is noted and for what @alanfcm does, the code should already be working totally fine, if it doesn't, it makes me think that the problem is that you are calling the file wrong or that it is not taking it either for some reason. problem in the path or in the name of the document, or where you are importing it So, try to put
or put it in
<head>
And finally do both options, I hope it helps you, greetings!
First, I would remove this return:
otherwise it works fine. I put the script in the body (with script tags) and no problem. In any case, activate the development page in the browser when you run the app (f12 in windows) and you will be able to see the errors in the console tab, and with that information correct the problem.