1

Necesito ayuda,tengo dos problemas, el primero es que se supone que cuando apretas el boton de registrar y hay espacios vacios deberia de reenviarte al formulario hasta que no haya espacios vacios, pero no solo no lo hace si no que o me lleva a una pagina donde me da error o me envia directo al index del usuario (que lo deberia hacer una vez este verificado todos los espacios), lo segundo es que quiero que le aparezca un mensaje mientras esta registrandose (antes de que envie el formulario) diciendole que las contraseñas no son iguales pero no me funciona tampoco

// funcion para que al apretar el boton de registrarse envie al index del usuario
$(function() {
console.log('JavaScript cargado correctamente');

$('#btnRegistrar').on('click', function() {
  window.location.href = 'indexUsuario.html';
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<main class="registro">
    <h1 class="tituloRegistro">Registro</h1>

    <article id="formRegistro">
      <img class="foto" src="img/Perfil.png" >
      <br>
      <form action="verificacioDatosRegistro.php" method="post">
        <label>Nombre de usuario:</label>
        <br>
        <input type="text" name="nombre" id="nombre"  placeholder="Escriba aquí">
        <br><br>
        <label>Contraseña:</label>
        <br>
        <input type="password" id="clave1" name="contrasenia" placeholder="Password">
        <br><br>
        <label>Verificar contraseña:</label>
        <br>
        <input type="password" id="clave2" name="val_contrasenia" placeholder="Password">
        <label id="mensaje" name="mensaje" style="color:#550303;"></label>
        <br><br>  
        <label>Email:</label> 
        <br>
        <input type="email" id="email" name="email" placeholder="[email protected]"> 
        <br><br>
        <label>Celular:</label>
        <br>
        <input type="tel" id="tel" name="tel" pattern="[0-9]{9}" placeholder="099123456" >
        <br><br>
        <label>Residencia actual:</label>
        <br>
        <select id="residencia" name="residencia" >
            <option value="Artigas">Artigas</option>
            <option value="Canelones">Canelones</option>
            <option value="Montevideo">Montevideo</option>
        </select>
        <br><br>
        <label>Fecha de nacimiento:</label>
        <br>
        <input type="date" id="fecha" name="fecha">
        <br> <br>
        <label>Foto de Perfil</label>
        <br>
        <input type="file" name="archivo" id="archivo" accept=".jpg, .png">
        <br><br>
        <label> Recibir notificaciones: </label>
        <input type="radio" name="opcion" value="opcion1">
        <label>En mi celular</label>
        <input type="radio" name="opcion" value="opcion2">
        <label>En mi correo</label>
        <br>
        <input type="checkbox" name="terminos">
        <label>Aceptar Terminos y Condiciones</label>
        <br>
        <button class="estado" id="btnRegistrar" name="boton_registro" type="button">Registrarse</button>
      </form>
  </article>
  </main>
<?


  

//codigo php 
if (isset($_POST["boton_registro"])) {
//ve si no hay espacios vacios, si los hay devuelve el formulario hasta que no haya ningun espacio vacio

if (! $_POST
  || trim($_POST['nombre'])   === ''
  || trim($_POST['contrasenia'])  === ''
  || trim($_POST['val_contrasenia'])  === ''
  || trim($_POST['email']) === ''
  || trim($_POST['tel']) === ''
  || trim($_POST['residencia']) === ''
  || trim($_POST['fecha']) === ''
  || trim($_POST['archivo']) === ''
  || trim($_POST['opcion']) === ''
  || trim($_POST['terminos']) === ''
  ) {
// si hay espacios vacios lo redirige al mismo formulario hasta que no hayan espacios vacios
  header("Location:registro.html");
}else{
//carga los datos que nos interesan verificar antes de enviarlo al index
  $nombre = $_POST["nombre"];
  $contrasenia = $_POST["contrasenia"];
  $val_contrasenia = $_POST["val_contrasenia"];
  // Validación de nombre, la funcion strelen sirve para pasar los datos de la variable a numero y asi comparar tamanio
  if (strlen($nombre) >= 10 && strlen($nombre) <= 20) {
      echo "Nombre válido" . "<br>";
  } elseif (strlen($nombre) < 10) {
      echo "Nombre inválido, muy corto" . "<br>";
  } elseif (strlen($nombre) > 20) {
      echo "Nombre inválido, muy largo" . "<br>";
}
  // Validación de contraseñas
  if ($contrasenia === $val_contrasenia) {
      echo "Contraseña válida" . "<br>";
  } else {

      echo "Contraseñas distintas, verifique" . "<br>";
}
  if (strlen($contrasenia) < 8) {
      echo "Contraseña muy corta, debe tener al menos 8 caracteres" . "<br>";
}
}}
?>

1
  • Bienvenida al sitio, te invito a hacer el recorrido de bienvenida. Allí verás que el formato del sitio está diseñado para hacer una pregunta por publicación. Si quieres una respuesta específica a tu segunda duda, sugiero que la escribas en una nueva pregunta (valga la redundancia). Editar esta pregunta y eliminar la segundad duda también asegurará que no termine cerrada por la comunidad.
    – jachguate
    Commented el 11 jul. a las 4:13

1 respuesta 1

2

Para validar los elementos del formulario, conviene que pongas el atributo required a aquellos elementos que sean obligatorios, luego con form.reportValidity() podrás verificar que todo está correcto en el formulario, y si no lo está mostrar un mensaje al usuario de lo que está mal para que corrija.

Según la documentación:

The HTMLFormElement.reportValidity() method returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.


El método HTMLFormElement.reportValidity() devuelve verdadero si los controles secundarios del elemento satisfacen sus restricciones de validación. Cuando se devuelve falso, se activan eventos no válidos cancelables para cada elemento secundario no válido y se informan los problemas de validación al usuario.

Nótese que este método controla no solamente que los campos estén o no vacíos, sino que controla que sean válidos según las restricciones. Es decir, si a un input tú le pones type="email", el método verificará que en ese campo haya escrito una dirección de correo electrónico válida desde el punto de vista sintáctico u ortográfico y lo mismo para los campos de cualquier tipo.

He aquí un fragmento de código. He puesto required a todos los campos, si hay alguno que no es obligatorio, simplemente quítale el required.

const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault();      
  if (form.reportValidity()) {
      console.log("Lanzar petición Fetch o Ajax");
  } else {
      console.log("Formulario no validado");
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<main class="registro">
    <h1 class="tituloRegistro">Registro</h1>

    <article id="formRegistro">
      <img class="foto" src="img/Perfil.png" >
      <br>
      <form action="verificacioDatosRegistro.php" method="post">
        <label>Nombre de usuario:</label>
        <br>
        <input type="text" name="nombre" id="nombre"  placeholder="Escriba aquí" required>
        <br><br>
        <label>Contraseña:</label>
        <br>
        <input type="password" id="clave1" name="contrasenia" placeholder="Password" required>
        <br><br>
        <label>Verificar contraseña:</label>
        <br>
        <input type="password" id="clave2" name="val_contrasenia" placeholder="Password" required>
        <label id="mensaje" name="mensaje" style="color:#550303;"></label>
        <br><br>  
        <label>Email:</label> 
        <br>
        <input type="email" id="email" name="email" placeholder="[email protected]" required> 
        <br><br>
        <label>Celular:</label>
        <br>
        <input type="tel" id="tel" name="tel" pattern="[0-9]{9}" placeholder="099123456" required>
        <br><br>
        <label>Residencia actual:</label>
        <br>
        <select id="residencia" name="residencia" required>
            <option value="Artigas">Artigas</option>
            <option value="Canelones">Canelones</option>
            <option value="Montevideo">Montevideo</option>
        </select>
        <br><br>
        <label>Fecha de nacimiento:</label>
        <br>
        <input type="date" id="fecha" name="fecha" required>
        <br> <br>
        <label>Foto de Perfil</label>
        <br>
        <input type="file" name="archivo" id="archivo" accept=".jpg, .png">
        <br><br>
        <label> Recibir notificaciones: </label>
        <input type="radio" name="opcion" value="opcion1" required>
        <label>En mi celular</label>
        <input type="radio" name="opcion" value="opcion2" required>
        <label>En mi correo</label>
        <br>
        <input type="checkbox" name="terminos" required>
        <label>Aceptar Terminos y Condiciones</label>
        <br>
        <button class="estado" id="btnRegistrar" name="boton_registro" type="submit">Registrarse</button>
      </form>
  </article>
  </main>

Por otra parte, para el tratamiento de los datos que son enviados al servidor, convendría que la nueva API Fetch de Javascript o bien Ajax. Así podrás pasar los datos al servidor, verificarlos allí y devolver una respuesta al cliente y en base a esa respuesta actualizar el estado de la pantalla.

En cuanto a la seguridad de la contraseña, convendría guardar un hash de la misma en una base de datos y comparar contra ese hash. Transportar contraseñas reales por la red es peligroso. Y si guardas contraseñas hasheadas, aunque la base de datos caiga en manos de hackers, difícilmente podrán obtener la contraseña real. Revisa la doc relativa a password_hash para más detalles.

1
  • En cuanto al último párrafo, almacenar hashes no es seguro per sé. Depende del algoritmo, y siempre es conveniente ponerles algo de sal, ya que hoy por hoy hay bases de datos de hashes que te devuelven en un segundo la contraseña a partir de un hash, es decir, el esfuerzo computacional para romper la seguridad, si no se tiene cuidado, resulta mínimo (en realidad se ha pagado por adelantado).
    – jachguate
    Commented el 11 jul. a las 4:11

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.