Click here to Skip to main content
15,395,257 members
Home / Discussions / JavaScript
   

JavaScript

 
Questionjava project Pin
Turki F773-Apr-22 15:30
MemberTurki F773-Apr-22 15:30 
AnswerRe: java project Pin
Richard Deeming3-Apr-22 21:26
mveRichard Deeming3-Apr-22 21:26 
QuestionAsync call inside loop finishes later than loop itself Pin
Bohuslav Parenica2-Apr-22 0:51
MemberBohuslav Parenica2-Apr-22 0:51 
AnswerRe: Async call inside loop finishes later than loop itself Pin
Richard Deeming3-Apr-22 21:33
mveRichard Deeming3-Apr-22 21:33 
QuestionTransforming Excel to Html (javascript) Pin
Member 1554681528-Mar-22 0:09
MemberMember 1554681528-Mar-22 0:09 
GeneralMessage Closed Pin
23-Mar-22 19:02
MemberRichardrussel23-Mar-22 19:02 
QuestionMessage Closed Pin
23-Mar-22 19:00
MemberRichardrussel23-Mar-22 19:00 
QuestionFormulario js Pin
Member 155607559-Mar-22 7:18
MemberMember 155607559-Mar-22 7:18 
Hola, soy nueva en el mundo del desarrollo web y me propuse hacer un formulario con html, css y js. Al hacer esta última tuve unos inconvenientes y no sé como solucionarlos. Cuando termino de colocar las contraseñas en mi formulario sale un error que dice lo siguiente "Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at HTMLInputElement.validarFormulario (intro.js:18:72)" y también "Uncaught ReferenceError: inputPassword1 is not defined at validarContrasena2 (intro.js:30:1) at HTMLInputElement.validarFormulario"

Aquí le adjunto el codigo para que me ayuden:

HTML:
<!DOCTYPE html>
<html>

<head>
  <title> Formulario </title>
  <link rel="stylesheet" href="Diseno.css">
  </head>

  <body>
    <center><h1>Formulario de datos</h1></center>
 <form action="" name="formulario" method="get" id="formulario">

   <div class="formulario_grupo" id="grupo_nombres">
    <label for="nombres">  Nombres: </label>
    <div class="formulario_grupo-imput">
        <input type="text" name="nombres" id="nombres"  placeholder="Escribe tus nombres">
        <p class="formulario_input-error">Puede tener un maximo de 30 caracteres.</p>
    </div>

<br>
 <div class="formulario_grupo" id="grupo_apellidos">
<label for="apellidos"> Apellidos: </label>
<input type="text" name="apellidos" id="apellidos" placeholder="Escribe tus apellidos" >
<p class="formulario_input-error">Puede tener un maximo de 30 caracteres.</p>
</div>

<br>
<div class="formulario_grupo" id="grupo_telefono">
<label for="telefono"> Numero telefonico: </label>
<input type="tel" name="telefono" id="telefono" placeholder="Escribe numero telefonico" >
</div>
  <p class="formulario_input-error">Solo se aceptan números.</p>
<br>

<label for="CI">C.I:</label>
<input type="radio" name="iden" id="CI" value="CI">
<br>
<label for="RIF"> RIF:</label>
  <input type="radio" name="iden" id="RIF" value="RIF">

  <div class="formulario_grupo" id="grupo_identidad">
<label for="identidad"> Ingrese Cedula o RIF:</label>
  <input type="text" name="identidad" id="identidad" placeholder="Número de CI o RIF" >
</div>
    <p class="formulario_input-error">debe de tener un maximo de 11 caracteres.</p>
<br>

<label for="nacimiento"> Fecha de nacimiento:</label>
<input type="date" name="nacimiento" id="nacimiento" >
<br>

<div class="formulario_grupo" id="grupo_correo">
<label for="correo"> Correo electonico: </label>
<input type="email" name="correo" id="correo" placeholder="Escribe tu E-mail" >
</div>

  <p class="formulario_input-error">El correo debe tener dominio.</p>
<br>
<div class="formulario_grupo" id="grupo_contrasena">
<label for="contrasena"> Contraseña: </label>
<input type="password" name="contrasena" id="contrasena" placeholder="Escribe tu contraseña" >
</div>

  <p class="formulario_input-error">La contraseña no puede tener espacios.</p>
<br>
<div class="formulario_grupo" id="grupo_contrasena2">
<label for="contrasena2"> Repetir contraseña: </label>
<input type="password" name="contrasena2" id="contrasena2" placeholder="Escribe tu contraseña" >
</div>

  <p class="formulario_input-error">Las contraseñas deben coincidir.</p>
<br>
  <label for="sexo"> Sexo:</label>
<select name="Sexo:" id="sexo">
  <option value="Masculino">Masculino</option>
  <option value="Femenino">Femenino</option>
  </div>
  <div class="formulario_mensaje" id="formulario_mensaje"
<p>Error </p>
</div>

    <input type="reset" id="reset" name="reset" value="Borrar">
    <br>
      <input type="submit" id="formulario_btn" name="formulario_btn" value="Enviar">
    </form>
      <script src="intro.js"></script>

    </body>

    </html>

Aquí adjunto CSS:
form {
width:60%;
border:10px solid #4682B4;
margin 30px;
padding 40px;
/*background: #dadcdf;*/
background:#dafae1 ;
}
.formulario_input-error{
font-size: 10px;
  font-family: "Georgia";
  color: #4d4d4f;
  margin-left: 20px;
  margin-bottom: 0px;
  margin-top: 0px;
  display: none;
}

.formulario_input-error-activo{
display: block;
}
.formulario_mensaje-exito{
  font-size: 13px;
    font-family: "Georgia";
    color: #4d4d4f;
display: none;
}
.formulario_mensaje-exito-activo{
display: block;
}
.formulario_validacion-estado{
  position: absolute;
  right: 10px;
  bottom: 15px;
  z-index: 100;
  font-size: 14px;
  opacity: 0;
}

label{
font-size:14px;
font-family: "Georgia";
display:block;
margin-left: 5px;
margin-top: 10px;
color: #4d4d4f;
}

input{
  margin-bottom: 18px;
  margin-left: 14px;
  width: 94%;
  padding:8px;
  border:1px solid #C0C0C0;
  box-sizing: border-box;
  background: #F8F8FF;
}

select{
  margin-bottom: 20px;
  width: 60%;
  margin-left: 14px;
  border:2px solid #C0C0C0;
}

input:focus {
  border: 4px solid 	#4169E1;
}

input[type="radio"]{
    margin-bottom: 1px;
    margin-top: 1px;
}

input[type="submit"]{
  background: #4169E1;
  color: #F8F8FF;
  width: 50%;
    margin-left: 170px;
}
input[type="submit"]:hover{
  background:#4682B4;
  cursor: pointer;
    width: 46%;
        margin-left: 185px;
}
input[type="reset"]{
  background: #4169E1;
  color: #F8F8FF;
  width: 50%;
    margin-left: 170px;
}
input[type="reset"]:hover{
  background:#4682B4;
  cursor: pointer;
    width: 46%;
    margin-left: 185px;
}
.formulario_grupo-correcto .formulario_validacion-estado{
color: #1ed12d;
opacity 1;
}
.formulario_grupo-incorrecto.formulario_label{
  color: #bb2929;
}
.formulario_grupo-incorrecto.formulario_validacion-estado{
  color: #bb2929;
  opacity: 1;
}
  .formulario_grupo-incorrecto.formulario_input{
    border: 3px solid #bb2929;
  }
  
 y Aquí js (donde me aparecio el error)

const formulario = document.getElementById("formulario");
const inputs = document.querySelectorAll("#formulario input");
const expresiones = {
contrasena: /^.{4,14}$/,
}

const validarFormulario = (e) => {
switch (e.target.name) {
    case "contrasena":
    if(expresiones.contrasena.test(e.target.value)){
 document.getElementById("grupo_contrasena").classList.remove("formulario_grupo-incorrecto");
 document.getElementById("grupo_contrasena").classList.add("formulario_grupo-correcto");
      document.querySelector("#grupo_correo .formulario_input-error").classList.remove ("formulario_input-error-activo");
}else{
 document.getElementById("grupo_contrasena").classList.remove("formulario_grupo-incorrecto");
 document.getElementById("grupo_contrasena").classList.add("formulario_grupo-correcto");
    document.querySelector("#grupo_contrasena .formulario_input-error").classList.remove ("formulario_input-error-activo");
     }
       validarContrasena2 ();
      break;
      case "contrasena2":
      validarContrasena2 ();
    break;
}
}
const validarContrasena2 = () => {
const inputContrasena1= document.getElementById("contrasena");
const inputContrasena2= document.getElementById("contrasena2");
if (inputPassword1.value !== inputPassword2.value){
  document.getElementById("grupo_contrasena2").classList.add("formulario_grupo-incorrecto");
  document.getElementById("grupo_contrasena2").classList.remove("formulario_grupo-correcto");
     document.querySelector("#grupo_contrasena2 .formulario_input-error").classList.add ("formulario_input-error-activo");
}
else {
  document.getElementById("grupo_contrasena2").classList.add("formulario_grupo-incorrecto");
  document.getElementById("grupo_contrasena2").classList.remove("formulario_grupo-correcto");
     document.querySelector("#grupo_contrasena2 .formulario_input-error").classList.add ("formulario_input-error-activo");
}
}

inputs.forEach((input) => {
  input.addEventListener("keyup", () => {
  input.addEventListener("blur", validarFormulario);
  });
});
formulario.addEventListener("submit", (e) => {
e.preventDefault();
});

AnswerRe: Formulario js Pin
RedDk9-Mar-22 7:33
MemberRedDk9-Mar-22 7:33 
QuestionCreating a responsive menu Pin
Member 1554804125-Feb-22 4:58
MemberMember 1554804125-Feb-22 4:58 
AnswerMessage Closed Pin
25-Feb-22 5:40
MemberMember 1554804125-Feb-22 5:40 
AnswerMessage Closed Pin
25-Feb-22 5:41
MemberMember 1554804125-Feb-22 5:41 
AnswerRe: Creating a responsive menu Pin
Member 1554804125-Feb-22 5:44
MemberMember 1554804125-Feb-22 5:44 
AnswerRe: Creating a responsive menu Pin
Richard Deeming27-Feb-22 21:12
mveRichard Deeming27-Feb-22 21:12 
QuestionAdding auto expand functionality to collapsible script Pin
Member 1554681524-Feb-22 3:38
MemberMember 1554681524-Feb-22 3:38 
AnswerRe: Adding auto expand functionality to collapsible script Pin
Member 1554681524-Feb-22 9:52
MemberMember 1554681524-Feb-22 9:52 
QuestionProper decoding using Vanilla Javascript Pin
jkirkerx17-Feb-22 12:04
professionaljkirkerx17-Feb-22 12:04 
AnswerRe: Proper decoding using Vanilla Javascript Pin
Richard Deeming17-Feb-22 21:33
mveRichard Deeming17-Feb-22 21:33 
GeneralRe: Proper decoding using Vanilla Javascript Pin
jkirkerx18-Feb-22 6:49
professionaljkirkerx18-Feb-22 6:49 
GeneralRe: Proper decoding using Vanilla Javascript Pin
Richard Deeming24-Feb-22 0:21
mveRichard Deeming24-Feb-22 0:21 
GeneralRe: Proper decoding using Vanilla Javascript Pin
jkirkerx24-Feb-22 5:37
professionaljkirkerx24-Feb-22 5:37 
QuestionAngular JS A href in View source Pin
Member 367124116-Feb-22 1:36
MemberMember 367124116-Feb-22 1:36 
AnswerRe: Angular JS A href in View source Pin
Richard Deeming17-Feb-22 1:58
mveRichard Deeming17-Feb-22 1:58 
QuestionWhy is my last input box not centering (class: powerwall-battery-input)? Pin
WannaBeAWebDev11-Feb-22 14:20
MemberWannaBeAWebDev11-Feb-22 14:20 
AnswerRe: Why is my last input box not centering (class: powerwall-battery-input)? Pin
rnbergren15-Feb-22 3:03
Memberrnbergren15-Feb-22 3:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.